/* PI Tech Talos Africa — Stone & Patina design system */

@font-face{font-family:'Archivo Exp';font-style:normal;font-weight:600;font-stretch:125%;font-display:swap;
  src:url('../assets/fonts/archivo-latin.woff2') format('woff2');}
@font-face{font-family:'Archivo Txt';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/archivo-400-latin.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/newsreader-latin.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;
  src:url('../assets/fonts/newsreader-italic-latin.woff2') format('woff2');}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/alexandria-arabic.woff2') format('woff2');}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/alexandria-400-arabic.woff2') format('woff2');}
@font-face{font-family:'Spline Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/splinemono-latin.woff2') format('woff2');}

:root{
  --paper:#F2F1EC; --leaf:#FAF9F5; --ink:#1A1E21; --ink-2:#5A605E;
  --patina:#2F6B5C; --patina-deep:#24544A; --bronze:#8A5D2E;
  --rule:rgba(26,30,33,.18); --rule-soft:rgba(26,30,33,.09);
  --disp:'Archivo Exp','Archivo',Futura,sans-serif;
  --sans:'Archivo Txt','Archivo',system-ui,sans-serif;
  --body:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'Spline Mono','IBM Plex Mono',Consolas,monospace;
  --ar:'Alexandria','Noto Kufi Arabic','Noto Sans Arabic',sans-serif;
  --maxw:1080px;
  --ease:cubic-bezier(.22,.61,.2,1);
}

*{box-sizing:border-box;}
html{background:var(--paper);scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:17.5px;line-height:1.68;-webkit-font-smoothing:antialiased;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .1 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");}
p{max-width:66ch;}
a{color:var(--patina);text-underline-offset:3px;}
::selection{background:rgba(47,107,92,.22);}
:focus-visible{outline:2px solid var(--patina);outline-offset:3px;border-radius:1px;}

/* Arabic locale: Alexandria carries display + body */
html[lang="ar"] body{font-family:var(--ar);font-size:17px;line-height:1.9;}
html[lang="ar"] .disp, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3{font-family:var(--ar);font-weight:500;font-stretch:normal;letter-spacing:0;}
html[lang="ar"] .poetic{font-family:var(--ar);font-style:normal;}
html[dir="rtl"] .mono, html[dir="rtl"] .kicker{letter-spacing:0;}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:28px;}
.mono{font-family:var(--mono);}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--patina);}
h1,h2,h3,.disp{font-family:var(--disp);font-weight:600;font-stretch:125%;letter-spacing:.01em;text-wrap:balance;}
h2{font-size:clamp(26px,3.6vw,34px);margin:10px 0 12px;}
.lede{color:var(--ink-2);font-size:17px;margin-top:0;}

/* ---------- header ---------- */
.site-head{position:fixed;inset-inline:0;top:0;z-index:50;background:rgba(242,241,236,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);}
body.scrolled .site-head{border-bottom-color:var(--rule-soft);background:rgba(242,241,236,.94);}
.head-in{max-width:var(--maxw);margin:0 auto;padding:0 28px;display:flex;align-items:center;
  justify-content:space-between;gap:18px;height:72px;transition:height .4s var(--ease);}
body.scrolled .head-in{height:56px;}
.brand{font-family:var(--disp);font-weight:600;font-stretch:125%;font-size:13.5px;letter-spacing:.14em;
  color:var(--ink);text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:11px;}
.brand-mark{width:30px;height:auto;display:block;transition:width .4s var(--ease);}
body.scrolled .brand-mark{width:26px;}
.brand .sep{color:var(--patina);}
html[lang="ar"] .brand{font-family:var(--ar);letter-spacing:0;font-size:15px;}
.nav{display:flex;gap:26px;align-items:center;}
.nav a{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;transition:color .25s;}
.nav a:hover{color:var(--patina);}
html[dir="rtl"] .nav a{letter-spacing:0;font-family:var(--ar);font-size:13px;text-transform:none;}
.langs{display:flex;gap:2px;border:1px solid var(--rule-soft);background:var(--leaf);}
.langs button{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;border:0;background:transparent;
  color:var(--ink-2);padding:7px 10px;cursor:pointer;transition:background .2s,color .2s;}
.langs button[aria-pressed="true"]{background:var(--ink);color:var(--leaf);}
.langs button:hover:not([aria-pressed="true"]){color:var(--patina);}
.menu-btn{display:none;border:1px solid var(--rule-soft);background:var(--leaf);cursor:pointer;
  padding:9px 10px;flex-direction:column;gap:4px;}
.menu-btn span{display:block;width:16px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .3s;}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
body.menu-open .menu-btn span:nth-child(2){opacity:0;}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}
.mobile-nav{position:fixed;inset:0;top:56px;z-index:40;background:var(--paper);display:none;
  flex-direction:column;padding:34px 28px;gap:6px;}
body.menu-open .mobile-nav{display:flex;}
body.menu-open{overflow:hidden;}
.mobile-nav a{font-family:var(--disp);font-weight:600;font-stretch:125%;font-size:24px;letter-spacing:.04em;
  color:var(--ink);text-decoration:none;padding:14px 0;border-bottom:1px solid var(--rule-soft);}
.mobile-nav a:active{color:var(--patina);}
html[lang="ar"] .mobile-nav a{font-family:var(--ar);letter-spacing:0;}
@media (max-width:820px){
  .nav{display:none;}
  .menu-btn{display:flex;}
}
@media (max-width:520px){
  .head-in{padding-inline:16px;gap:10px;}
  .brand{font-size:10.5px;letter-spacing:.1em;}
  .langs button{padding:6px 8px;}
  .cta-row .btn{flex:1 1 auto;text-align:center;}
}
@media (max-width:460px){
  .brand-ext{display:none;}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;padding-top:72px;padding-bottom:88px;}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.hero-scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 60% at 38% 52%, rgba(242,241,236,.88) 0%, rgba(242,241,236,.45) 55%, rgba(242,241,236,0) 100%);}
html[dir="rtl"] .hero-scrim{background:radial-gradient(ellipse 62% 60% at 62% 52%, rgba(242,241,236,.88) 0%, rgba(242,241,236,.45) 55%, rgba(242,241,236,0) 100%);}
.hero-in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:64px 28px 0;width:100%;}
.hero .kicker{display:inline-flex;align-items:center;gap:12px;}
.hero .kicker::before{content:"";display:block;width:34px;height:1.5px;background:var(--patina);}
.hero h1{font-size:clamp(30px,5.6vw,60px);line-height:1.08;margin:20px 0 0;max-width:19ch;}
.poetic{font-family:var(--body);font-style:italic;font-size:clamp(18px,2.2vw,23px);color:var(--patina-deep);margin:22px 0 0;}
.hero .sub{color:var(--ink-2);font-size:17px;margin:18px 0 0;max-width:56ch;}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}
.btn{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;padding:13px 24px;border:1.5px solid var(--ink);color:var(--ink);background:transparent;
  cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);}
.btn:hover{background:var(--ink);color:var(--leaf);transform:translateY(-1px);}
.btn.primary{background:var(--ink);color:var(--leaf);}
.btn.primary:hover{background:var(--patina-deep);border-color:var(--patina-deep);}
html[dir="rtl"] .btn{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:13.5px;}
.stats{display:flex;flex-wrap:wrap;border-top:1.5px solid var(--ink);margin-top:56px;background:var(--leaf);}
.stat{flex:1 1 170px;padding:16px 18px 14px;border-inline-end:1px solid var(--rule-soft);}
.stat:last-child{border-inline-end:none;}
.stat .v{font-family:var(--disp);font-weight:600;font-stretch:125%;font-size:24px;font-variant-numeric:tabular-nums;}
html[lang="ar"] .stat .v{font-family:var(--ar);}
.stat .l{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-top:4px;line-height:1.6;}
html[dir="rtl"] .stat .l{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:12px;}
.scroll-cue{position:absolute;bottom:22px;inset-inline-start:50%;transform:translateX(-50%);z-index:2;
  width:1.5px;height:44px;background:linear-gradient(var(--patina),transparent);transform-origin:top;}
html[dir="rtl"] .scroll-cue{transform:translateX(50%);}
@media (prefers-reduced-motion:no-preference){
  .scroll-cue{animation:cue 2.6s var(--ease) infinite;}
  @keyframes cue{0%,100%{transform:translateX(-50%) scaleY(.55);opacity:.5;}50%{transform:translateX(-50%) scaleY(1);opacity:1;}}
  html[dir="rtl"] .scroll-cue{animation:cue-rtl 2.6s var(--ease) infinite;}
  @keyframes cue-rtl{0%,100%{transform:translateX(50%) scaleY(.55);opacity:.5;}50%{transform:translateX(50%) scaleY(1);opacity:1;}}
}

/* ---------- sections ---------- */
.section{padding:104px 0 0;scroll-margin-top:64px;}
.section .wrap>.kicker{display:inline-flex;align-items:center;gap:12px;}
.section .wrap>.kicker::before{content:"";display:block;width:0;height:1.5px;background:var(--patina);
  transition:width .8s var(--ease) .15s;}
.section.in .wrap>.kicker::before{width:34px;}
.rule-top{border-top:1.5px solid var(--ink);padding-top:16px;}

/* product points / whynow cards / doctrine items */
.grid{display:grid;gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft);margin-top:34px;}
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.cell{background:var(--leaf);padding:24px 24px 20px;transition:background .35s var(--ease),box-shadow .35s var(--ease);}
.cell:hover{background:#FFFEFB;box-shadow:inset 0 -2px 0 var(--patina);}
.cell h3{font-size:16.5px;letter-spacing:.03em;margin:0 0 8px;transition:color .3s;}
.cell:hover h3{color:var(--patina-deep);}
.cell p{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.6;}
.cell .n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--patina);display:block;margin-bottom:10px;}

/* legend */
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:34px;margin-top:34px;}
.act .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--patina);}
html[dir="rtl"] .act .k{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:12.5px;}
.act h3{font-size:19px;margin:10px 0 8px;}
.act p{font-size:15px;color:var(--ink-2);margin:0;line-height:1.7;}
.credo{font-family:var(--body);font-style:italic;text-align:center;font-size:clamp(20px,2.8vw,27px);
  color:var(--patina-deep);margin:72px auto 0;max-width:36ch;}
.credo::before{content:"";display:block;width:34px;height:1.5px;background:var(--patina);margin:0 auto 22px;}
html[lang="ar"] .credo{font-family:var(--ar);font-style:normal;}

/* doctrine */
.doctrine-list{list-style:none;margin:34px 0 0;padding:0;counter-reset:doc;}
.doctrine-list li{border-top:1px solid var(--rule-soft);padding:20px 2px;display:grid;
  grid-template-columns:56px 240px 1fr;gap:20px;align-items:baseline;}
.doctrine-list li:last-child{border-bottom:1px solid var(--rule-soft);}
.doctrine-list .no{font-family:var(--mono);font-size:11px;color:var(--patina);letter-spacing:.1em;}
.doctrine-list h3{font-size:16px;margin:0;}
.doctrine-list p{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.6;}
@media (max-width:720px){.doctrine-list li{grid-template-columns:44px 1fr;}.doctrine-list p{grid-column:2;}}

/* contour divider */
.divider{margin-top:104px;height:110px;overflow:hidden;opacity:.5;}
.divider svg{width:100%;height:100%;display:block;}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;margin-top:36px;}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);}
html[dir="rtl"] .field label{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:12.5px;}
.field input,.field textarea{font-family:var(--body);font-size:16px;color:var(--ink);background:var(--leaf);
  border:1px solid var(--rule);padding:12px 14px;border-radius:0;transition:border-color .2s;}
html[lang="ar"] .field input,html[lang="ar"] .field textarea{font-family:var(--ar);}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--patina);box-shadow:0 0 0 1px var(--patina);}
.field textarea{min-height:140px;resize:vertical;}
.hp{position:absolute;inset-inline-start:-9999px;opacity:0;height:0;overflow:hidden;}
.form-msg{font-size:14.5px;margin-top:14px;display:none;}
.form-msg.ok{display:block;color:var(--patina-deep);}
.form-msg.err{display:block;color:#8C2F2F;}
.direct{border:1px solid var(--rule-soft);background:var(--leaf);padding:26px 28px;height:fit-content;}
.direct .dl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);}
html[dir="rtl"] .direct .dl{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:12.5px;}
.direct .dv{font-size:17px;margin:6px 0 22px;}
.direct .dv a{color:var(--ink);text-decoration-color:var(--patina);}

/* ---------- footer ---------- */
.site-foot{margin-top:110px;border-top:1.5px solid var(--ink);}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:26px 28px 40px;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:14px 30px;align-items:baseline;}
.foot-in .tag{font-family:var(--body);font-style:italic;color:var(--ink-2);font-size:15px;}
html[lang="ar"] .foot-in .tag{font-family:var(--ar);font-style:normal;}
.foot-links{display:flex;gap:22px;}
.foot-links a{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;}
.foot-links a:hover{color:var(--patina);}
html[dir="rtl"] .foot-links a{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:12.5px;}
.foot-in .rights{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-2);width:100%;margin-top:8px;}
html[dir="rtl"] .foot-in .rights{font-family:var(--ar);}

/* ---------- article pages (legal / press) ---------- */
.article{padding:150px 0 40px;min-height:70vh;}
.article h1{font-size:clamp(28px,4vw,40px);margin:8px 0 24px;}
.article h3{font-size:17px;margin:28px 0 8px;}
.article p{color:var(--ink-2);font-size:16px;}
.back-home{font-family:var(--mono);font-size:16px;text-decoration:none;display:inline-flex;
  align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--rule);
  color:var(--ink);transition:background .25s,color .25s,border-color .25s;}
.back-home:hover{background:var(--ink);color:var(--leaf);border-color:var(--ink);}
html[dir="rtl"] .back-home span{display:inline-block;transform:scaleX(-1);} /* ← points toward "back" in RTL too */

/* ---------- reveal animations ---------- */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s);}
.in>.reveal,.reveal.in{opacity:1;transform:none;}
.hero-seq>*{opacity:0;transform:translateY(14px);animation:rise .9s var(--ease) forwards;}
.hero-seq>*:nth-child(1){animation-delay:.05s}.hero-seq>*:nth-child(2){animation-delay:.18s}
.hero-seq>*:nth-child(3){animation-delay:.32s}.hero-seq>*:nth-child(4){animation-delay:.44s}
.hero-seq>*:nth-child(5){animation-delay:.56s}.hero-seq>*:nth-child(6){animation-delay:.72s}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.hero-seq>*{opacity:1 !important;transform:none !important;animation:none !important;transition:none !important;}
  .section .wrap>.kicker::before{width:34px;transition:none;}
}