/* ==========================================================================
   FONTS: change the site typeface ONLY through the variables below
   (--font-ar, --font-latin, --font-sans, and the --fw-* heading weights).
   Nothing else in the site may set font-family directly. Fonts with a
   restricted licence need the owner's written permission before web use.

   The Arabic display font files live in assets/fonts/ar/, are intentionally
   git-ignored, must be placed manually on the host, and the site falls back
   to the bundled Arabic font (IBM Plex Sans Arabic, SIL OFL) if they are
   absent. That font covers Arabic letters only; Latin text and Western
   digits always use IBM Plex Sans Arabic.
   ========================================================================== */
@font-face{font-family:'Thmanyah Sans';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/ar/ar-300.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+061C;}
@font-face{font-family:'Thmanyah Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ar/ar-400.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+061C;}
@font-face{font-family:'Thmanyah Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ar/ar-500.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+061C;}
@font-face{font-family:'Thmanyah Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/ar/ar-700.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+061C;}
@font-face{font-family:'Thmanyah Sans';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/ar/ar-900.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+061C;}

:root{
  --font-ar:'Thmanyah Sans','IBM Plex Sans Arabic';
  --font-latin:'IBM Plex Sans Arabic';
  --font-sans:var(--font-latin),var(--font-ar),system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --fw-display:600;   /* big headlines: hero, section titles, article title */
  --fw-title:600;     /* smaller titles: tiles, rows, stories, posts, prose */
  --fw-strong:600;    /* inline emphasis, names, current language */
}
html[lang="ar"]{
  --font-sans:var(--font-ar),var(--font-latin),system-ui,-apple-system,'Segoe UI',Roboto,Tahoma,Arial,sans-serif;
  /* The Arabic display font has no 600 and runs heavier than IBM Plex:
     Medium for the large headlines, Bold for small titles and emphasis. */
  --fw-display:500;
  --fw-title:700;
  --fw-strong:700;
}

/* ==========================================================================
   ALarkon — shared design system
   One typeface, one accent (logo purple), calm neutrals, generous whitespace.
   Logical properties throughout so the same rules work for LTR (index.html)
   and RTL (ar.html, blog pages).
   ========================================================================== */

/* ---------- Local font files (OFL), paths relative to assets/css/ ---------- */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-sans-arabic-arabic-400.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-sans-arabic-arabic-500.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-sans-arabic-arabic-600.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-sans-arabic-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-sans-arabic-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-sans-arabic-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- Tokens ---------- */
:root{
  --bg:#fbfbfd;
  --bg-alt:#f5f5f7;
  --surface:#ffffff;
  --ink:#1d1d1f;
  --ink-2:#6e6e73;          /* 5.0:1 on #fff, 4.6:1 on #f5f5f7 */
  --line:#d2d2d7;
  --accent:#432c7a;         /* deep purple from the ARKON mark — 11:1 on white */
  --accent-hover:#301f59;
  --dark:#000;
  --dark-2:#111113;
  --on-dark:#f5f5f7;
  --on-dark-2:#a1a1a6;      /* 7.9:1 on #000 */
  --accent-on-dark:#b9abf3; /* light tint of the same purple — 9.6:1 on #000 */
  --line-dark:#2c2c2e;

  --ease:cubic-bezier(0.28,0.11,0.32,1);

  --nav-h:52px;
  --gutter:clamp(20px,5vw,48px);
  --wrap:1180px;
  --wrap-wide:1360px;
  --section-y:clamp(80px,10vw,152px);
  --radius-lg:28px;
  --radius-md:20px;

  --fs-display:clamp(40px,4.6vw + 16px,88px);
  --fs-headline:clamp(32px,3.2vw + 14px,64px);
  --fs-title:clamp(24px,1.4vw + 16px,36px);
  --fs-lede:clamp(21px,0.6vw + 17px,28px);
  --fs-body:17px;
  --fs-small:14px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
html[lang="ar"] body{line-height:1.75}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul[role="list"],.list-reset{list-style:none;padding:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.18em}
button{font:inherit;color:inherit}
[hidden]{display:none !important}
[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}

/* Arabic: never track letters (breaks joining), roomier heading leading for dots/diacritics */
html[lang="ar"] *{letter-spacing:0 !important}
/* Taller leading so dots, shadda and other diacritics never clip; the display
   font is visually larger and heavier than IBM Plex, so big sizes step down ~10%. */
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{line-height:1.38}
html[lang="ar"]{
  --fs-display:clamp(36px,4.1vw + 14px,78px);
  --fs-headline:clamp(30px,2.9vw + 12px,56px);
}
html[lang="ar"] .statement .headline{font-size:clamp(32px,3.9vw + 12px,70px)}
html[lang="ar"] .tile--feature .tile__title,html[lang="ar"] .article-head h1{font-weight:var(--fw-display)}
html[lang="ar"] .title,html[lang="ar"] .tile__title,html[lang="ar"] .row__title,html[lang="ar"] .story__title,html[lang="ar"] .post__title{line-height:1.45}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.section--dark :focus-visible{outline-color:var(--accent-on-dark)}

.skip-link{
  position:absolute;inset-inline-start:12px;top:-100px;z-index:200;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-weight:500;
}
.skip-link:focus{top:12px;text-decoration:none}
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.wrap{width:min(var(--wrap),100% - 2 * var(--gutter));margin-inline:auto}
.wrap--wide{width:min(var(--wrap-wide),100% - 2 * var(--gutter));margin-inline:auto}
.wrap--narrow{width:min(760px,100% - 2 * var(--gutter));margin-inline:auto}

/* ---------- Type ---------- */
.display{font-size:var(--fs-display);font-weight:var(--fw-display);line-height:1.07}
.headline{font-size:var(--fs-headline);font-weight:var(--fw-display);line-height:1.1}
.title{font-size:var(--fs-title);font-weight:var(--fw-title);line-height:1.2}
.lede{font-size:var(--fs-lede);font-weight:400;line-height:1.4;color:var(--ink-2)}
html[lang="ar"] .lede{line-height:1.65}
.eyebrow{font-size:var(--fs-small);font-weight:500;color:var(--ink-2)}
html[lang="en"] .display,html[lang="en"] .headline{letter-spacing:-0.02em}
html[lang="en"] .title{letter-spacing:-0.01em}
.center{text-align:center}
.center .lede,.lede--center{margin-inline:auto}
.measure{max-width:34em}

/* Text link with chevron ("Learn more ›"). The chevron mirrors in RTL. */
.link-arrow{
  display:inline-flex;align-items:center;gap:.35em;
  font-weight:500;color:var(--accent);min-height:44px;
}
.link-arrow .chev{width:.5em;height:.85em;flex:none;transition:transform .3s var(--ease)}
.link-arrow:hover .chev{transform:translateX(3px)}
[dir="rtl"] .chev{transform:scaleX(-1)}
[dir="rtl"] .link-arrow:hover .chev{transform:scaleX(-1) translateX(3px)}
.chev--back,.link-arrow:hover .chev--back{transform:scaleX(-1)}
[dir="rtl"] .chev--back,[dir="rtl"] .link-arrow:hover .chev--back{transform:none}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  min-height:44px;padding:11px 24px;border-radius:999px;border:0;cursor:pointer;
  font-size:17px;font-weight:500;line-height:1.2;text-decoration:none;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-hover)}
.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px;margin-top:32px}

/* ---------- Header / navigation ---------- */
.site-header{
  position:sticky;top:0;z-index:100;height:var(--nav-h);
  border-bottom:1px solid rgba(0,0,0,.07);
}
/* The translucent backdrop lives on a pseudo-element: a backdrop-filter on the header
   itself would become the containing block of the fixed mobile menu. */
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(251,251,253,.94);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .site-header::before{background:rgba(251,251,253,.78);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px)}
}
.site-header__inner{
  height:100%;display:flex;align-items:center;gap:24px;
  width:min(var(--wrap-wide),100% - 2 * var(--gutter));margin-inline:auto;
}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:var(--fw-title);font-size:17px;min-height:44px}
.brand:hover{text-decoration:none}
.brand img{width:40px;height:40px}
.nav{flex:1;display:flex;align-items:center;gap:24px}
.nav__list{display:flex;flex:1;justify-content:center;gap:clamp(16px,2.4vw,36px);list-style:none;margin:0;padding:0}
.nav__list a,.lang a,.lang span{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:14px;color:#424245;
}
html[lang="ar"] .nav__list a{font-size:15px}
.nav__list a:hover,.lang a:hover{color:var(--ink);text-decoration:none}
.nav__list a[aria-current="page"]{color:var(--ink);font-weight:500}
.lang{display:flex;align-items:center;gap:6px;font-size:14px}
.lang span[aria-current]{color:var(--ink);font-weight:var(--fw-strong)}
.lang__sep{color:var(--line)}
.lang a{color:var(--ink-2);padding-inline:2px}

.menu-btn{
  display:none;margin-inline-start:auto;width:44px;height:44px;border:0;background:none;cursor:pointer;
  align-items:center;justify-content:center;border-radius:10px;
}
.menu-btn__bars{position:relative;width:18px;height:12px}
.menu-btn__bars::before,.menu-btn__bars::after{
  content:"";position:absolute;inset-inline:0;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .35s var(--ease),top .35s var(--ease);
}
.menu-btn__bars::before{top:2px}
.menu-btn__bars::after{top:9px}
.nav-open .menu-btn__bars::before{top:5.5px;transform:rotate(45deg)}
.nav-open .menu-btn__bars::after{top:5.5px;transform:rotate(-45deg)}

@media (max-width:833px){
  /* Without JS the links simply wrap under the logo, so navigation always works. */
  .site-header{height:auto;min-height:var(--nav-h)}
  .site-header__inner{flex-wrap:wrap;gap:0 16px;padding-block:4px}
  .nav{flex-basis:100%;flex-wrap:wrap;gap:0 16px}
  .nav__list{flex-wrap:wrap;justify-content:flex-start;gap:0 16px}

  .js .site-header{height:var(--nav-h)}
  .js .site-header__inner{flex-wrap:nowrap;padding-block:0}
  .js .menu-btn{display:inline-flex}
  .js .nav{
    position:fixed;inset:var(--nav-h) 0 0 0;z-index:99;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:32px;
    padding:24px var(--gutter) 48px;background:var(--bg);overflow-y:auto;
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s linear .35s;
  }
  .js.nav-open .nav{visibility:visible;opacity:1;transform:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
  .js .nav__list{flex:none;flex-direction:column;justify-content:flex-start;gap:0}
  .js .nav__list a{font-size:28px;font-weight:var(--fw-title);color:var(--ink);min-height:56px;width:100%}
  .js .lang{font-size:17px}
  .js .lang a,.js .lang span{font-size:17px;min-width:44px;justify-content:center}
  .nav-open{overflow:hidden}
}

/* ---------- Sections ---------- */
.section{padding-block:var(--section-y)}
.section--alt{background:var(--bg-alt)}
.section--white{background:var(--surface)}
.section--dark{background:var(--dark);color:var(--on-dark)}
.section--dark .lede,.section--dark .eyebrow{color:var(--on-dark-2)}
.section--dark a{color:var(--accent-on-dark)}
.section__head{margin-bottom:clamp(40px,5vw,72px)}
.section__head .lede{margin-top:16px;max-width:36em}

/* ---------- Hero ---------- */
.hero{padding-top:clamp(64px,9vw,128px);padding-bottom:clamp(56px,7vw,104px);background:var(--bg)}
.hero__title{max-width:16ch;margin-inline:auto}
html[lang="ar"] .hero__title{max-width:18ch}
.hero__lede{margin-top:20px;max-width:30em;margin-inline:auto}
.hero__media{margin-top:clamp(48px,6vw,80px)}
.tile-media{border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-alt)}
.tile-media img{width:100%;height:auto}
@media (prefers-reduced-motion:no-preference){
  .hero__media .tile-media{animation:hero-in 1.1s var(--ease) .15s both}
  .hero__media .tile-media img{animation:hero-zoom 1.6s var(--ease) .15s both}
}
@keyframes hero-in{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes hero-zoom{from{transform:scale(1.05)}to{transform:none}}

/* ---------- Statement (dark) ---------- */
.statement .headline{max-width:14ch;margin-inline:auto;font-size:clamp(36px,4.4vw + 14px,80px)}
html[lang="ar"] .statement .headline{max-width:16ch}
.statement .lede{margin-top:24px;max-width:28em}

/* ---------- About ---------- */
.split{display:grid;gap:clamp(40px,6vw,96px);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}}
.about__text .headline{margin-bottom:28px}
.about__text p + p{margin-top:20px}
.about__text p{font-size:clamp(19px,0.5vw + 16px,23px);line-height:1.55;color:var(--ink)}
html[lang="ar"] .about__text p{line-height:1.85}
.about__text p.muted{color:var(--ink-2)}

/* ---------- Partner shelf ---------- */
.shelf{display:grid;gap:clamp(16px,2vw,24px)}
@media (min-width:760px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{
  background:var(--bg-alt);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;min-width:0;
}
.tile__media{aspect-ratio:4 / 3;background:#fff;overflow:hidden}
/* Partner images are all 4:3, so cover never crops them; contain is the safe fallback. */
.tile__media img{width:100%;height:100%;object-fit:contain}
.tile__body{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:12px;flex:1}
.tile__title{font-size:var(--fs-title);font-weight:var(--fw-title);line-height:1.2}
.tile__text{color:var(--ink-2);font-size:17px}
.tile__text .line{display:block}
.tile__actions{margin-top:auto;padding-top:4px;display:flex;flex-wrap:wrap;gap:4px 24px}

.tile--feature{grid-column:1 / -1}
@media (min-width:900px){
  .tile--feature{flex-direction:row;align-items:center}
  .tile--feature .tile__media{flex:0 0 55%}
  .tile--feature .tile__body{justify-content:center;padding:clamp(40px,5vw,72px)}
}
.tile--feature .tile__title{font-size:clamp(32px,2.4vw + 14px,48px)}
html[lang="en"] .tile--feature .tile__title{letter-spacing:-0.02em}
.tile--feature .tile__text{font-size:clamp(19px,0.5vw + 16px,21px)}

/* "Read more" clamp — only applied when JS is running, so no text is ever lost. */
.more-btn{
  display:none;align-items:center;gap:.35em;min-height:44px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--accent);font-weight:500;font-size:17px;
}
.more-btn:hover{text-decoration:underline;text-underline-offset:.18em}
.js .clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.js .clamp.is-expanded{display:block;-webkit-line-clamp:unset;overflow:visible}
.js .more-btn.is-needed{display:inline-flex}

/* ---------- IBS focus (dark) — clean rows, not cards ---------- */
.rows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line-dark)}
.row{
  display:grid;gap:8px 32px;align-items:center;
  padding-block:clamp(28px,3vw,40px);border-top:1px solid var(--line-dark);
  color:var(--on-dark);text-decoration:none;
}
.section--dark a.row{color:var(--on-dark)}
.row:hover{text-decoration:none}
.row:hover .row__title{color:#fff}
.row__title{font-size:clamp(24px,1.6vw + 14px,36px);font-weight:var(--fw-title);line-height:1.2;transition:color .3s var(--ease)}
html[lang="en"] .row__title{letter-spacing:-0.01em}
.row__text{color:var(--on-dark-2);max-width:36em}
.row__cta{color:var(--accent-on-dark);font-weight:500;display:inline-flex;align-items:center;gap:.35em;min-height:44px;white-space:nowrap}
.row__cta .chev{width:.5em;height:.85em;transition:transform .3s var(--ease)}
.row:hover .row__cta .chev{transform:translateX(4px)}
[dir="rtl"] .row:hover .row__cta .chev{transform:scaleX(-1) translateX(4px)}
@media (min-width:760px){
  .row{grid-template-columns:minmax(0,1fr) auto}
  .row__cta{grid-column:2;grid-row:1 / span 2}
}

/* ---------- Events ---------- */
.stories{display:grid;gap:clamp(16px,2vw,24px)}
@media (min-width:760px){.stories{grid-template-columns:repeat(2,minmax(0,1fr))}}
.story{background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.story__media{aspect-ratio:4 / 3;overflow:hidden;background:var(--bg-alt)}
.story__media img{width:100%;height:100%;object-fit:cover}
.story__body{padding:clamp(24px,3vw,40px)}
.story__meta{font-size:var(--fs-small);color:var(--ink-2);margin-bottom:10px}
.story__title{font-size:clamp(22px,1.2vw + 14px,30px);font-weight:var(--fw-title);line-height:1.25}
html[lang="en"] .story__title{letter-spacing:-0.01em}
.story__text{margin-top:12px;color:var(--ink-2)}
.badge{
  display:inline-block;margin-inline-end:6px;padding:2px 10px;border-radius:999px;
  background:var(--bg-alt);color:var(--ink);font-size:12px;font-weight:var(--fw-strong);
}

/* ---------- Blog entry ---------- */
.entry .headline{max-width:18ch;margin-inline:auto}
.entry .lede{margin-top:20px;max-width:32em}
.entry .actions{margin-top:28px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;gap:clamp(40px,5vw,80px);align-items:start}
@media (min-width:900px){.contact-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.contact-grid h3{font-size:var(--fs-small);font-weight:500;color:var(--ink-2);margin-bottom:20px}
.details{display:grid;gap:28px;margin:0}
.details dt{font-size:var(--fs-small);color:var(--ink-2);margin-bottom:4px}
.details dd{font-size:clamp(21px,0.8vw + 16px,26px);font-weight:500;line-height:1.35}
.details a{color:var(--ink);display:inline-flex;min-height:44px;align-items:center}
.details a:hover{color:var(--accent)}
.ltr-num{direction:ltr;unicode-bidi:isolate}
.map{border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-alt);aspect-ratio:4 / 3}
@media (min-width:900px){.map{aspect-ratio:16 / 11}}
.map iframe{width:100%;height:100%;border:0}
.map-facade{
  width:100%;height:100%;border:0;cursor:pointer;font:inherit;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:var(--bg-alt) radial-gradient(circle at 50% 45%,#ebe7f7 0,transparent 60%);
  transition:background-color .3s var(--ease);
}
.map-facade:hover{background-color:#ececf0}
.map-facade svg{width:44px;height:44px;color:var(--accent)}
.map-facade__label{font-size:19px;font-weight:var(--fw-strong)}
.map-facade__note{font-size:var(--fs-small);color:var(--ink-2)}

/* ---------- WhatsApp ---------- */
.wa-icon{width:1.25em;height:1.25em;flex:none}
.btn--wa{background:#0f8a43;color:#fff}
.btn--wa:hover{background:#0b6e35}
.contact__wa{margin-top:32px}
.events__cta{margin-top:clamp(32px,4vw,48px)}
.wa-float{
  position:fixed;bottom:20px;right:20px;z-index:90;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#0f8a43;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.18);
  transition:transform .3s var(--ease),background-color .3s var(--ease);
}
.wa-float:hover{background:#0b6e35;transform:scale(1.06)}
.wa-float .wa-icon{width:30px;height:30px}
[dir="rtl"] .wa-float{right:auto;left:20px}
.nav-open .wa-float{display:none}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg-alt);color:var(--ink-2);font-size:12px;line-height:1.5;padding-block:32px 40px}
.site-footer__nav{display:flex;flex-wrap:wrap;gap:0 24px;list-style:none;margin:0 0 16px;padding:0 0 12px;border-bottom:1px solid var(--line)}
.site-footer__nav a{color:#424245;display:inline-flex;align-items:center;min-height:44px;font-size:13px}
html[lang="ar"] .site-footer__nav a{font-size:14px}
.site-footer--spaced{margin-top:var(--section-y)}
.site-footer__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
html[lang="ar"] .site-footer{font-size:13px}

/* ---------- Blog listing ---------- */
.page-hero{padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(40px,5vw,72px)}
.page-hero .lede{margin-top:20px;max-width:32em}
.filters{display:grid;gap:28px}
.search{position:relative}
.search input{
  width:100%;min-height:52px;padding-block:12px;padding-inline:52px 20px;
  border:1px solid transparent;border-radius:14px;background:var(--bg-alt);color:var(--ink);
  font:inherit;font-size:17px;
}
.search input::placeholder{color:var(--ink-2)}
.search input:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(67,44,122,.15)}
.search svg{position:absolute;inset-inline-start:18px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--ink-2);pointer-events:none}
.filter-groups{display:grid;gap:24px}
@media (min-width:760px){.filter-groups{grid-template-columns:1fr 1fr}}
.filter-group h2{font-size:var(--fs-small);font-weight:500;color:var(--ink-2);margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  min-height:44px;padding:8px 18px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:15px;font-weight:500;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.chip:hover{border-color:var(--ink-2)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.posts-section{margin-top:clamp(40px,5vw,64px);padding-block:clamp(48px,6vw,96px)}
.posts{display:grid;gap:clamp(16px,2vw,24px)}
@media (min-width:640px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.posts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.post{background:var(--surface);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column}
.post__media{display:block;aspect-ratio:16 / 10;overflow:hidden;background:var(--bg-alt)}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.post__media:hover img{transform:scale(1.03)}
.post__body{padding:24px 24px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.post__meta{font-size:var(--fs-small);color:var(--ink-2)}
.post__title{font-size:21px;font-weight:var(--fw-title);line-height:1.35}
.post__title a{color:var(--ink)}
.post__title a:hover{color:var(--accent);text-decoration:none}
.post__excerpt{color:var(--ink-2);font-size:16px}
.post__body .link-arrow{margin-top:auto}
.no-results{padding-block:64px}
.no-results h2{font-size:var(--fs-title);font-weight:var(--fw-title)}
.no-results p{color:var(--ink-2);margin-top:8px}

/* ---------- Blog article ---------- */
.article-head{padding-top:clamp(48px,6vw,96px)}
.article-head h1{font-size:clamp(34px,3.2vw + 16px,64px);font-weight:var(--fw-display);line-height:1.3;margin-top:16px}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:20px;color:var(--ink-2);font-size:15px}
.tag{display:inline-flex;align-items:center;padding:2px 12px;border-radius:999px;background:#ece8f6;color:var(--accent);font-size:13px;font-weight:500}
.article-media{margin-block:clamp(32px,4vw,56px)}
.article-media img{width:100%;max-height:560px;object-fit:cover}
.prose{font-size:19px;line-height:1.9;color:#333336}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(26px,1vw + 20px,34px);font-weight:var(--fw-title);line-height:1.35;color:var(--ink);margin-top:2em}
.prose h3{font-size:22px;font-weight:var(--fw-title);line-height:1.4;color:var(--ink);margin-top:1.6em}
.prose ul{padding-inline-start:1.4em}
.prose li + li{margin-top:.4em}
.prose strong{color:var(--ink);font-weight:var(--fw-strong)}
.prose blockquote{
  margin-block:1.6em;padding-block:4px;padding-inline-start:24px;
  border-inline-start:3px solid var(--accent);font-size:clamp(21px,0.6vw + 18px,25px);line-height:1.7;color:var(--ink);
}
.divider{border:0;border-top:1px solid var(--line);margin-block:clamp(48px,6vw,80px)}
.comments h2,.related h2{font-size:var(--fs-title);font-weight:var(--fw-title);margin-bottom:24px}
.comment-form textarea{
  width:100%;min-height:132px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);
  font:inherit;font-size:17px;color:var(--ink);resize:vertical;
}
.comment-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(67,44,122,.15)}
.comment-form .btn{margin-top:12px}
.comment{display:flex;gap:16px;margin-top:32px}
.avatar{flex:none;width:48px;height:48px;border-radius:50%;background:var(--bg-alt);color:var(--ink-2);display:grid;place-items:center;font-weight:var(--fw-strong)}
.comment__name{font-weight:var(--fw-strong)}
.comment__text{color:var(--ink-2)}
.related{margin-top:clamp(48px,6vw,80px)}
.related ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.related li{padding-block:18px;border-bottom:1px solid var(--line)}
.related .related__title{font-weight:500}
.related .related__date{font-size:var(--fs-small);color:var(--ink-2)}

/* ---------- Scroll reveal (opt-in: site.js adds .reveal-ready only when it can animate) ---------- */
.reveal-ready .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-ready .reveal.is-visible{opacity:1;transform:none}
.reveal-ready .reveal[data-delay="1"]{transition-delay:.08s}
.reveal-ready .reveal[data-delay="2"]{transition-delay:.16s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .reveal-ready .reveal{opacity:1;transform:none}
}