/* =========================================================
   Qinwan International — Design Tokens
   Palette drawn from the logo: bark brown Q, palm-frond green,
   and the amber diamond at the heart of the mark.
   The recurring "ripening gradient" (green → amber → deep red)
   is not decoration — it is the literal colour path a date
   travels from khalal to tamr, used throughout as dividers,
   underlines and progress markers.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,500&family=Work+Sans:wght@400;500;600;700&family=El+Messiri:wght@400;500;600;700&family=Tajawal:wght@300;400;500;700;900&display=swap');

:root{
  /* ink & ground */
  --ink:        #2A2013;
  --ink-soft:   #6B5940;
  --paper:      #FBF6EA;
  --sand:       #F3E7CE;
  --sand-deep:  #E7D5A9;
  --white:      #FFFFFF;

  /* brand */
  --bark:       #3E2818;
  --bark-2:     #5A3A22;
  --bark-soft:  rgba(62,40,24,.08);
  --frond:      #4C7A3E;
  --frond-dark: #2E4C25;
  --frond-light:#8FB878;
  --date-amber: #D2892F;
  --date-red:   #8C3B1E;

  /* ripening gradient, khalal -> rutab -> tamr */
  --ripen: linear-gradient(90deg, var(--frond) 0%, var(--date-amber) 52%, var(--date-red) 100%);

  /* type */
  --f-display-ar: 'El Messiri', 'Fraunces', serif;
  --f-body-ar: 'Tajawal', 'Work Sans', sans-serif;
  --f-display-lat: 'Fraunces', 'El Messiri', serif;
  --f-body-lat: 'Work Sans', 'Tajawal', sans-serif;

  --radius: 6px;
  --radius-lg: 18px;
  --shadow-soft: 0 12px 34px -14px rgba(42,32,19,.35);
  --shadow-card: 0 6px 20px -10px rgba(42,32,19,.28);
  --container: 1180px;
  --nav-h: 76px;
}
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

html[lang="ar"]{ --f-display: var(--f-display-ar); --f-body: var(--f-body-ar); }
html[lang="en"], html[lang="fr"]{ --f-display: var(--f-display-lat); --f-body: var(--f-body-lat); }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  background:var(--sand);
  color:var(--ink);
  font-family:var(--f-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
[dir="rtl"] body{ font-family: var(--f-body-ar); }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--f-display); margin:0 0 .4em; color:var(--bark); font-weight:600; letter-spacing:.01em; }
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{ font-family:var(--f-display-ar); font-weight:700; }
p{ margin:0 0 1em; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }

::selection{ background:var(--date-amber); color:var(--white); }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--date-amber);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- eyebrow / ripening divider (signature element) ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-body); font-weight:700; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--bark-2); margin-bottom:.9em;
}
[dir="rtl"] .eyebrow{ font-family:var(--f-body-ar); letter-spacing:0; font-weight:700; }
.eyebrow::before{
  content:""; width:34px; height:4px; border-radius:3px;
  background:var(--ripen); flex:none;
}

.ripen-rule{
  height:3px; width:100%; border-radius:3px; background:var(--ripen);
  opacity:.9;
}
.ripen-dots{ display:flex; gap:8px; align-items:center; }
.ripen-dots span{ width:9px; height:9px; border-radius:50%; display:block; }
.ripen-dots span:nth-child(1){ background:var(--frond); }
.ripen-dots span:nth-child(2){ background:var(--date-amber); }
.ripen-dots span:nth-child(3){ background:var(--date-red); }

/* ---------- frond starburst motif (svg data-uri backgrounds) ---------- */
.frond-motif{
  position:absolute; inset:0; pointer-events:none;
  background-repeat:no-repeat;
  opacity:.14;
}

/* =========================== NAV =========================== */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(251,246,234,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bark-soft);
}
.nav{
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand img{ height:44px; width:auto; }
.brand-name{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name b{ font-family:var(--f-display); font-size:1.05rem; color:var(--bark); }
[dir="rtl"] .brand-name b{ font-family:var(--f-display-ar); }
.brand-name span{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
[dir="rtl"] .brand-name span{ letter-spacing:0; }

.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links a{
  padding:10px 16px; border-radius:999px; font-weight:600; font-size:.95rem;
  color:var(--bark-2); position:relative; transition:background .2s,color .2s;
}
.nav-links a:hover{ background:var(--bark-soft); }
.nav-links a.active{ background:var(--bark); color:var(--paper); }

.nav-right{ display:flex; align-items:center; gap:10px; }

.lang-switch{ display:flex; border:1px solid var(--bark-soft); border-radius:999px; overflow:hidden; }
.lang-switch button{
  border:none; background:transparent; padding:8px 12px; font-size:.78rem; font-weight:700;
  color:var(--ink-soft); letter-spacing:.04em;
}
.lang-switch button.active{ background:var(--bark); color:var(--paper); }

.nav-toggle{
  display:none; flex:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--bark-soft);
  background:var(--paper); align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:20px; height:2px; background:var(--bark); position:relative; transition:.2s;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

@media (max-width: 900px){
  .nav-links{
    position:fixed; inset-inline:0; top:var(--nav-h);
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-top:1px solid var(--bark-soft);
    padding:8px 20px 20px; transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:.22s ease; box-shadow:var(--shadow-soft);
  }
  .nav-links a{ padding:14px 8px; border-radius:0; border-bottom:1px solid var(--bark-soft); }
  .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-toggle{ display:flex; }
}

/* =========================== BUTTONS =========================== */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:14px 26px; border-radius:999px; font-weight:700; font-size:.95rem;
  border:2px solid transparent; transition:transform .18s, box-shadow .18s, background .18s, color .18s;
}
.btn-primary{ background:var(--bark); color:var(--paper); box-shadow:var(--shadow-card); }
.btn-primary:hover{ transform:translateY(-2px); background:var(--frond-dark); }
.btn-outline{ border-color:var(--bark); color:var(--bark); background:transparent; }
.btn-outline:hover{ background:var(--bark); color:var(--paper); }
.btn-whatsapp{ background:#3D8552; color:#fff; }
.btn-whatsapp:hover{ transform:translateY(-2px); background:#2E6B40; }

/* =========================== HERO =========================== */
.hero{
  position:relative; min-height:88vh; display:flex; align-items:flex-end;
  overflow:hidden; color:var(--paper);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,14,8,.15) 0%, rgba(20,14,8,.35) 55%, rgba(20,14,8,.86) 100%);
}
.hero-inner{ position:relative; z-index:1; padding-block:80px 64px; width:100%; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--sand);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28);
  padding:8px 16px; border-radius:999px; margin-bottom:22px;
}
[dir="rtl"] .hero-eyebrow{ letter-spacing:0; }
.hero h1{
  color:var(--paper); font-size:clamp(2.3rem, 5.4vw, 4.4rem); max-width:16ch;
  line-height:1.06; margin-bottom:.35em; text-wrap:balance;
}
.hero p.lede{ max-width:52ch; font-size:1.15rem; color:rgba(255,255,255,.86); margin-bottom:34px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-stats{
  margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid rgba(255,255,255,.22); padding-top:24px; max-width:640px;
}
.hero-stats div{ padding-inline-end:20px; border-inline-end:1px solid rgba(255,255,255,.22); }
.hero-stats div:last-child{ border-inline-end:none; }
.hero-stats b{ display:block; font-family:var(--f-display); font-size:1.7rem; color:var(--paper); }
[dir="rtl"] .hero-stats b{ font-family:var(--f-display-ar); }
.hero-stats span{ font-size:.8rem; color:rgba(255,255,255,.78); }

/* =========================== SECTIONS =========================== */
section{ padding-block:96px; position:relative; }
.section-alt{ background:var(--paper); }
.section-bark{ background:var(--bark); color:var(--sand); }
.section-bark h2, .section-bark .eyebrow{ color:var(--paper); }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head h2{ font-size:clamp(1.7rem, 3.2vw, 2.6rem); }
.section-head p{ color:var(--ink-soft); font-size:1.06rem; }
.section-bark .section-head p{ color:rgba(243,231,206,.82); }

/* split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; gap:36px; } }
.split-media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft); }
.split-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.split-media .frame{
  position:absolute; inset:14px; border:1px solid rgba(255,255,255,.5); border-radius:calc(var(--radius-lg) - 8px);
  pointer-events:none;
}

/* stat cards */
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:760px){ .stat-grid{ grid-template-columns:1fr; } }
.stat-card{
  background:var(--paper); border-radius:var(--radius-lg); padding:30px 28px;
  box-shadow:var(--shadow-card); border-inline-start:4px solid var(--frond);
}
.stat-card:nth-child(2){ border-inline-start-color:var(--date-amber); }
.stat-card:nth-child(3){ border-inline-start-color:var(--date-red); }
.stat-card b{ display:block; font-family:var(--f-display); font-size:2.1rem; color:var(--bark); }
[dir="rtl"] .stat-card b{ font-family:var(--f-display-ar); }
.stat-card span{ color:var(--ink-soft); font-size:.92rem; }

/* market cards */
.market-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:880px){ .market-grid{ grid-template-columns:1fr; } }
.market-card{
  background:var(--sand-deep); border-radius:var(--radius-lg); padding:30px;
  transition:transform .2s, box-shadow .2s;
}
.market-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.market-card .m-icon{
  width:46px; height:46px; border-radius:50%; background:var(--bark); color:var(--sand);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:1.2rem;
}
.market-card h3{ font-size:1.15rem; margin-bottom:.5em; }
.market-card ul{ display:flex; flex-wrap:wrap; gap:8px; }
.market-card li{
  font-size:.82rem; background:var(--paper); padding:5px 12px; border-radius:999px; color:var(--ink-soft);
}

/* gallery */
.gal-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; grid-auto-rows:150px;
}
@media (max-width:900px){ .gal-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .gal-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:120px; } }
.gal-item{
  position:relative; overflow:hidden; border-radius:12px; cursor:pointer; background:var(--sand-deep);
}
.gal-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gal-item:hover img{ transform:scale(1.08); }
.gal-item.tall{ grid-row:span 2; }
.gal-item.wide{ grid-column:span 2; }
.gal-item::after{
  content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,14,8,.45), transparent 45%);
  opacity:0; transition:opacity .25s;
}
.gal-item:hover::after{ opacity:1; }

/* lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(18,12,7,.92); z-index:200;
  display:none; align-items:center; justify-content:center; padding:5vh 4vw;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:88vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox-close{
  position:absolute; top:22px; inset-inline-end:26px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:1.4rem;
}

/* products */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:900px){ .product-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .product-grid{ grid-template-columns:1fr; } }
.product-card{
  background:var(--paper); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column;
}
.product-media{ aspect-ratio:5/4; overflow:hidden; }
.product-media img{ width:100%; height:100%; object-fit:cover; }
.product-body{ padding:22px 22px 26px; flex:1; display:flex; flex-direction:column; }
.product-tag{
  align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--frond); color:#fff; padding:4px 12px; border-radius:999px; margin-bottom:12px;
}
.product-card h3{ font-size:1.2rem; margin-bottom:.4em; }
.product-card p{ color:var(--ink-soft); font-size:.94rem; margin-bottom:0; flex:1; }

.product-card.placeholder{
  background:transparent; border:2px dashed var(--bark-soft); box-shadow:none;
  align-items:center; justify-content:center; text-align:center; padding:40px 22px; color:var(--ink-soft);
}
.product-card.placeholder .ph-icon{
  width:52px; height:52px; border-radius:50%; border:2px dashed var(--frond); display:flex;
  align-items:center; justify-content:center; margin:0 auto 14px; font-size:1.4rem; color:var(--frond);
}

/* timeline (process) - order genuinely matters here: harvest calendar */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
@media (max-width:880px){ .process{ grid-template-columns:1fr; gap:26px; } }
.process::before{
  content:""; position:absolute; top:22px; inset-inline:6%; height:3px; background:var(--ripen);
  border-radius:3px;
}
@media (max-width:880px){ .process::before{ inset-inline:22px; top:0; bottom:0; width:3px; height:auto; inset-inline-end:auto; } }
.p-step{ position:relative; padding-inline-end:20px; }
@media (max-width:880px){ .p-step{ padding-inline-start:52px; padding-inline-end:0; } }
.p-dot{
  width:46px; height:46px; border-radius:50%; background:var(--paper); border:3px solid var(--frond);
  display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:700;
  color:var(--bark); position:relative; z-index:1; margin-bottom:16px;
}
[dir="rtl"] .p-dot{ font-family:var(--f-display-ar); }
.process .p-step:nth-child(2) .p-dot{ border-color:var(--date-amber); }
.process .p-step:nth-child(3) .p-dot{ border-color:var(--date-amber); }
.process .p-step:nth-child(4) .p-dot{ border-color:var(--date-red); }
@media (max-width:880px){ .p-dot{ position:absolute; inset-inline-start:0; top:0; margin-bottom:0; } }
.p-step h4{ font-size:1.05rem; margin-bottom:.35em; }
.p-step p{ font-size:.92rem; color:var(--ink-soft); margin-bottom:0; }

/* contact */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:50px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.info-card{
  display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--bark-soft);
}
.info-card:last-child{ border-bottom:none; }
.info-icon{
  flex:none; width:46px; height:46px; border-radius:12px; background:var(--bark); color:var(--sand);
  display:flex; align-items:center; justify-content:center; font-size:1.15rem;
}
.info-card h4{ margin-bottom:.25em; font-size:1.02rem; }
.info-card p{ margin:0; color:var(--ink-soft); }
.info-card a{ color:var(--bark-2); font-weight:600; }
.map-frame{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); margin-top:26px; }
.map-frame iframe{ width:100%; height:280px; border:0; display:block; }

.form{ background:var(--paper); padding:34px; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }
.form label{ display:block; font-size:.85rem; font-weight:700; color:var(--bark-2); margin-bottom:6px; }
.form .field{ margin-bottom:18px; }
.form input, .form select, .form textarea{
  width:100%; padding:13px 14px; border-radius:10px; border:1.5px solid var(--sand-deep);
  background:var(--white); font-family:inherit; font-size:.95rem; color:var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus{ border-color:var(--frond); outline:none; }
.form textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:.82rem; color:var(--ink-soft); margin-top:14px; }

/* socials row */
.social-row{ display:flex; gap:12px; margin-top:8px; }
.social-row a{
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--bark-soft); display:flex;
  align-items:center; justify-content:center; font-size:1.1rem; color:var(--bark-2); transition:.2s;
}
.social-row a:hover{ background:var(--bark); color:var(--paper); }

/* about page extras */
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:880px){ .value-grid{ grid-template-columns:1fr; } }
.value-card{ padding:30px; background:var(--sand-deep); border-radius:var(--radius-lg); }
.value-card .v-icon{ font-size:1.6rem; margin-bottom:14px; display:block; }
.value-card h3{ font-size:1.1rem; }
.value-card p{ color:var(--ink-soft); font-size:.94rem; margin-bottom:0; }

.quote-block{
  border-inline-start:4px solid var(--date-amber); padding-inline-start:26px; margin:0;
  font-family:var(--f-display); font-size:1.4rem; color:var(--bark); font-style:italic; line-height:1.5;
}
[dir="rtl"] .quote-block{ font-family:var(--f-display-ar); font-style:normal; }

/* logo mark section (about) */
.mark-explain{ display:flex; align-items:center; gap:40px; flex-wrap:wrap; }
.mark-explain img{ width:150px; flex:none; }
.mark-list{ display:grid; gap:14px; flex:1; min-width:260px; }
.mark-list li{ display:flex; gap:12px; align-items:flex-start; }
.mark-list .dot{ width:10px; height:10px; border-radius:50%; margin-top:8px; flex:none; }

/* =========================== CTA STRIP =========================== */
.cta-strip{
  background:var(--bark); color:var(--sand); border-radius:var(--radius-lg);
  padding:50px 44px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-strip h3{ color:var(--paper); font-size:1.6rem; max-width:26ch; margin-bottom:.3em; }
.cta-strip p{ color:rgba(243,231,206,.8); margin-bottom:0; }
.cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* =========================== FOOTER =========================== */
.site-footer{ background:var(--bark); color:rgba(243,231,206,.82); padding-block:64px 28px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-brand{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.foot-brand img{ height:40px; }
.foot-brand b{ font-family:var(--f-display); color:var(--paper); font-size:1.05rem; }
[dir="rtl"] .foot-brand b{ font-family:var(--f-display-ar); }
.site-footer h5{
  color:var(--paper); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px;
  font-family:var(--f-body); font-weight:700;
}
[dir="rtl"] .site-footer h5{ letter-spacing:0; font-family:var(--f-body-ar); }
.site-footer ul li{ margin-bottom:10px; }
.site-footer a:hover{ color:var(--paper); }
.foot-bottom{
  margin-top:50px; padding-top:22px; border-top:1px solid rgba(243,231,206,.15);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.82rem;
}

/* =========================== WHATSAPP FLOAT =========================== */
.wa-float{
  position:fixed; bottom:24px; inset-inline-end:24px; z-index:150;
  display:flex; align-items:center; gap:10px;
  background:#25D366; color:#fff; padding:14px 16px; border-radius:999px;
  box-shadow:0 10px 30px -8px rgba(20,60,30,.55);
  font-weight:700; font-size:.9rem;
  transition:transform .2s, box-shadow .2s;
}
.wa-float:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 14px 34px -8px rgba(20,60,30,.65); }
.wa-float svg{ width:26px; height:26px; flex:none; }
.wa-label{ max-width:0; overflow:hidden; white-space:nowrap; transition:max-width .3s ease; }
.wa-float:hover .wa-label{ max-width:160px; }

/* =========================== PAGE HERO (inner pages) =========================== */
.page-hero{
  position:relative; padding-block:150px 90px; color:var(--paper); overflow:hidden;
}
.page-hero .hero-media::after{
  background:linear-gradient(180deg, rgba(20,14,8,.45), rgba(20,14,8,.82));
}
.page-hero h1{ color:var(--paper); font-size:clamp(2rem,4.4vw,3.4rem); max-width:20ch; }
.page-hero p{ max-width:56ch; color:rgba(255,255,255,.85); font-size:1.05rem; margin-bottom:0; }
.crumb{ font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:16px; }
[dir="rtl"] .crumb{ letter-spacing:0; }

/* utility */
.mt-56{ margin-top:56px; }
.text-center{ text-align:center; margin-inline:auto; }
.max-56{ max-width:56ch; }
.nav{ flex-wrap: nowrap; }
.brand{ flex: 1 1 auto; min-width: 0; overflow: hidden; }
.brand-name{ min-width: 0; overflow: hidden; }
.brand-name b{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 480px){
  .brand-name span{ display: none; }
}
.nav-right{ flex: none; }
.lang-switch{ flex: none; }
.nav-toggle{ flex: none; }
@media (max-width: 900px){
  .nav-links{
    position: fixed !important;
    top: var(--nav-h) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}
@media (max-width: 900px){
  .nav-links{
    padding: 12px 16px 20px !important;
    gap: 6px !important;
  }
  .nav-links a{
    display: block;
    border-bottom: none !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin: 0 !important;
  }
  .nav-links a.active{
    border-radius: 12px !important;
  }
}