:root{
  --charcoal:#1D1D1B;
  --charcoal-2:#272724;
  --bone:#EDE6DA;
  --ivory:#F9F7F2;
  --copper:#B86E45;
  --copper-light:#C17A52;
  --copper-dark:#8F4B2D;
  --stone:#655D56;
  --line:rgba(29,29,27,.13);
  --line-dark:rgba(237,230,218,.16);
  --shadow:0 24px 70px rgba(29,29,27,.11);
  --radius:24px;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ivory)}
body{
  margin:0;background:var(--ivory);color:var(--charcoal);
  font-family:"Manrope","Segoe UI",Arial,sans-serif;
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
body.rtl{direction:rtl}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
button,select,input,textarea{font:inherit}
::selection{background:var(--copper);color:white}
.skip-link{position:fixed;left:1rem;top:-10rem;z-index:9999;background:var(--charcoal);color:white;padding:.75rem 1rem;border-radius:10px}
.skip-link:focus{top:1rem}
.progress{position:fixed;z-index:1000;left:0;top:0;height:3px;background:var(--copper);width:0}
.shell{width:min(var(--max),calc(100% - 40px));margin:auto}
.site-header{
  position:sticky;top:0;z-index:800;
  background:rgba(249,247,242,.88);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(29,29,27,.08)
}
.nav{min-height:76px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;font-weight:760;letter-spacing:.02em}
.rtl .brand{margin-right:0;margin-left:auto}
.brand-mark{
  width:38px;height:38px;border:1px solid var(--charcoal);display:grid;place-items:center;
  position:relative;overflow:hidden;font-size:.78rem;font-weight:800
}
.brand-mark:after{
  content:"";position:absolute;width:54px;height:2px;background:var(--copper);
  transform:rotate(-35deg)
}
.brand-mark span{background:var(--ivory);z-index:2;padding:0 2px}
.nav-links{display:flex;align-items:center;gap:22px;font-size:.92rem}
.nav-links a{opacity:.76;position:relative}
.nav-links a:hover,.nav-links a:focus-visible{opacity:1}
.nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:var(--copper);transition:.25s}
.nav-links a:hover:after{right:0}
.lang-switch{
  display:flex;gap:3px;padding:3px;border:1px solid var(--line);
  border-radius:999px;background:#fff
}
.lang-switch a{
  min-width:36px;text-align:center;padding:.42rem .58rem;border-radius:999px;
  font-size:.76rem;font-weight:700;letter-spacing:.05em
}
.lang-switch a[aria-current="true"]{background:var(--charcoal);color:var(--bone)}
.menu-btn{display:none;background:none;border:0;padding:8px}
.menu-btn span{display:block;width:24px;height:1px;background:var(--charcoal);margin:5px 0}
.hero{
  min-height:calc(100vh - 76px);background:var(--charcoal);color:var(--bone);
  display:grid;align-items:center;position:relative;overflow:hidden
}
.hero:before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,transparent 49.9%,rgba(237,230,218,.055) 50%,transparent 50.1%),
    linear-gradient(0deg,transparent 49.9%,rgba(237,230,218,.04) 50%,transparent 50.1%);
  background-size:86px 86px;
  mask-image:linear-gradient(to right,transparent,black 38%,black 100%);
}
.hero-grid{display:grid;grid-template-columns:1.13fr .87fr;gap:72px;align-items:center;padding:88px 0}
.eyebrow{
  display:flex;align-items:center;gap:11px;text-transform:uppercase;letter-spacing:.16em;
  font-size:.72rem;font-weight:800;color:var(--copper-light);margin-bottom:20px
}
.eyebrow:before{content:"";width:30px;height:1px;background:currentColor}
.rtl .eyebrow:before{order:2}
.hero h1{font-size:clamp(3.3rem,7vw,7.2rem);line-height:.88;letter-spacing:-.06em;margin:0 0 30px;max-width:920px}
.hero h1 em{font-style:normal;color:var(--copper-light)}
.hero-copy{max-width:720px;font-size:clamp(1.05rem,1.5vw,1.32rem);color:rgba(237,230,218,.78);margin-bottom:34px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:.85rem 1.15rem;
  border:1px solid transparent;font-weight:700;font-size:.9rem;transition:.22s
}
.btn.primary{background:var(--copper);color:white}
.btn.primary:hover{background:#a9613d;transform:translateY(-2px)}
.btn.ghost{border-color:rgba(237,230,218,.27);color:var(--bone)}
.btn.ghost:hover{border-color:var(--copper-light);color:var(--copper-light)}
.system-map{
  min-height:520px;position:relative;border:1px solid var(--line-dark);border-radius:30px;
  background:radial-gradient(circle at 50% 50%,rgba(184,110,69,.14),transparent 45%);
  box-shadow:inset 0 0 70px rgba(0,0,0,.2)
}
.system-map svg{position:absolute;inset:7%;width:86%;height:86%}
.system-map .orbit{fill:none;stroke:rgba(237,230,218,.13);stroke-width:1}
.system-map .link{stroke:rgba(193,122,82,.52);stroke-width:1.2}
.system-map .node{fill:var(--charcoal);stroke:var(--copper-light);stroke-width:1.2}
.system-map .center{fill:var(--copper)}
.map-label{position:absolute;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(237,230,218,.66)}
.ml1{top:12%;left:8%}.ml2{top:15%;right:8%}.ml3{bottom:15%;left:8%}.ml4{bottom:12%;right:8%}.ml5{top:47%;left:50%;transform:translate(-50%,-50%);color:var(--bone);text-align:center;font-weight:800}
.rtl .ml1{left:auto;right:8%}.rtl .ml2{right:auto;left:8%}.rtl .ml3{left:auto;right:8%}.rtl .ml4{right:auto;left:8%}
.section{padding:116px 0}
.section.alt{background:var(--bone)}
.section.dark{background:var(--charcoal);color:var(--bone)}
.section-head{display:grid;grid-template-columns:.45fr 1fr;gap:40px;margin-bottom:54px;align-items:start}
.kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:.17em;font-weight:800;color:var(--copper-dark)}
.dark .kicker{color:var(--copper-light)}
.section-head h2{font-size:clamp(2.2rem,4vw,4.4rem);line-height:1;letter-spacing:-.045em;margin:0}
.section-head p{margin:15px 0 0;max-width:760px;color:var(--stone)}
.dark .section-head p{color:rgba(237,230,218,.65)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{
  border:1px solid var(--line);border-radius:var(--radius);padding:30px;background:rgba(255,255,255,.5);
  position:relative;overflow:hidden;transition:.25s;min-height:265px
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(184,110,69,.42)}
.dark .card{background:var(--charcoal-2);border-color:var(--line-dark)}
.card .num{font-size:.72rem;letter-spacing:.14em;color:var(--copper-dark);font-weight:800}
.dark .card .num{color:var(--copper-light)}
.card h3{font-size:1.5rem;line-height:1.15;margin:48px 0 12px;letter-spacing:-.025em}
.card p{margin:0;color:var(--stone)}
.dark .card p{color:rgba(237,230,218,.62)}
.card .arrow{position:absolute;right:24px;top:24px;font-size:1.2rem;color:var(--copper-dark)}
.rtl .card .arrow{right:auto;left:24px;transform:scaleX(-1)}
.dark .card .arrow{color:var(--copper-light)}
.timeline{border-top:1px solid var(--line)}
.timeline-row{
  display:grid;grid-template-columns:190px 1fr 1.5fr;gap:30px;padding:28px 0;border-bottom:1px solid var(--line)
}
.timeline-row .date{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--stone)}
.timeline-row strong{font-size:1.05rem}
.timeline-row p{margin:0;color:var(--stone)}
.signal{
  display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);
  border-radius:30px;overflow:hidden;background:var(--ivory)
}
.signal-copy{padding:48px}
.signal-visual{min-height:440px;background:var(--charcoal);position:relative;overflow:hidden}
.signal-visual:before,.signal-visual:after{
  content:"";position:absolute;border:1px solid rgba(193,122,82,.38);border-radius:50%
}
.signal-visual:before{width:340px;height:340px;left:50%;top:50%;transform:translate(-50%,-50%)}
.signal-visual:after{width:220px;height:220px;left:50%;top:50%;transform:translate(-50%,-50%)}
.signal-dot{position:absolute;width:12px;height:12px;background:var(--copper);border-radius:50%}
.d1{left:28%;top:28%}.d2{right:25%;top:40%}.d3{left:42%;bottom:18%}.d4{left:50%;top:50%;transform:translate(-50%,-50%);width:24px;height:24px}
.signal-line{position:absolute;height:1px;background:rgba(237,230,218,.24);transform-origin:left}
.l1{width:31%;left:31%;top:31%;transform:rotate(22deg)}.l2{width:26%;left:51%;top:51%;transform:rotate(-22deg)}.l3{width:24%;left:44%;top:53%;transform:rotate(96deg)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pill{border:1px solid var(--line);padding:.5rem .75rem;border-radius:999px;font-size:.78rem;font-weight:650}
.source-list{display:grid;gap:12px}
.source{
  display:grid;grid-template-columns:54px 1fr auto;gap:18px;align-items:center;padding:20px;
  border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.48)
}
.source-index{font-size:.75rem;color:var(--copper-dark);font-weight:800}
.source small{display:block;color:var(--stone);margin-top:2px}
.source .out{color:var(--copper-dark);font-weight:800}
.article-hero{padding:84px 0 64px;background:var(--charcoal);color:var(--bone)}
.article-hero h1{font-size:clamp(2.7rem,6vw,6rem);line-height:.95;letter-spacing:-.055em;max-width:1000px;margin:18px 0 24px}
.article-hero p{max-width:800px;color:rgba(237,230,218,.7);font-size:1.1rem}
.article{display:grid;grid-template-columns:240px minmax(0,780px);gap:72px;padding:82px 0 110px}
.toc{position:sticky;top:110px;align-self:start;font-size:.82rem}
.toc a{display:block;padding:8px 0;color:var(--stone)}
.toc a:hover{color:var(--copper-dark)}
.prose h2{font-size:2.15rem;line-height:1.06;letter-spacing:-.035em;margin:58px 0 18px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.2rem;margin:28px 0 8px}
.prose p,.prose li{color:#4b4945}
.prose ul{padding-inline-start:22px}
.callout{border-left:3px solid var(--copper);padding:18px 22px;background:var(--bone);margin:30px 0;border-radius:0 14px 14px 0}
.rtl .callout{border-left:0;border-right:3px solid var(--copper);border-radius:14px 0 0 14px}
.ref{font-size:.72em;vertical-align:super;color:var(--copper-dark);font-weight:800}
.quote{font-size:1.35rem;line-height:1.45;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;margin:36px 0}
.contact-band{background:var(--copper);color:white;padding:62px 0}
.contact-inner{display:flex;justify-content:space-between;align-items:end;gap:30px}
.contact-inner h2{font-size:clamp(2.2rem,4.7vw,4.8rem);line-height:.95;letter-spacing:-.045em;margin:0;max-width:820px}
.email-box{white-space:nowrap;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:.75rem 1rem}
.footer{background:var(--charcoal);color:var(--bone);padding:54px 0 36px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.footer p,.footer a{color:rgba(237,230,218,.58);font-size:.86rem}
.footer a:hover{color:var(--copper-light)}
.footer-bottom{border-top:1px solid var(--line-dark);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;gap:20px;color:rgba(237,230,218,.45);font-size:.75rem}
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.js .reveal.visible{opacity:1;transform:none}
@media (max-width:1000px){
  .nav-links{display:none;position:absolute;top:76px;left:20px;right:20px;background:var(--ivory);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
  .nav-links.open{display:flex}.menu-btn{display:block}
  .hero-grid{grid-template-columns:1fr;padding:70px 0}.system-map{min-height:390px}
  .section-head{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr 1fr}
  .timeline-row{grid-template-columns:140px 1fr}.timeline-row p{grid-column:2}
  .article{grid-template-columns:1fr}.toc{display:none}
  .signal{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:660px){
  .shell{width:min(var(--max),calc(100% - 24px))}
  .nav{min-height:68px;gap:12px}.site-header .lang-switch{display:flex}.site-header .lang-switch a{min-width:30px;padding:.34rem .4rem;font-size:.68rem}
  .brand{gap:8px}.brand>span:last-child{font-size:.9rem}.brand-mark{width:34px;height:34px}
  .hero{min-height:auto}.hero-grid{padding:56px 0 38px;gap:36px}
  .hero h1{font-size:clamp(3rem,17vw,5rem)}
  .system-map{min-height:330px}
  .section{padding:82px 0}.grid-3,.grid-2{grid-template-columns:1fr}
  .timeline-row{grid-template-columns:1fr;gap:7px}.timeline-row p{grid-column:auto}
  .signal-copy{padding:30px}.signal-visual{min-height:320px}
  .source{grid-template-columns:38px 1fr}.source .out{grid-column:2}
  .contact-inner{display:block}.email-box{display:inline-block;margin-top:24px;white-space:normal}
  .footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}


/* =========================
   V2 interaction + responsive system
   ========================= */
@view-transition { navigation:auto; }
::view-transition-old(root){animation:site-out .24s cubic-bezier(.2,.75,.25,1) both}
::view-transition-new(root){animation:site-in .34s cubic-bezier(.2,.75,.25,1) both}
@keyframes site-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes site-in{from{opacity:0;transform:translateY(8px)}}

body.rtl{
  font-family:"Tajawal",Tahoma,Arial,sans-serif;
  font-size:1.02rem;
  line-height:1.88;
  text-rendering:optimizeLegibility;
}
.rtl h1,.rtl h2,.rtl h3,.rtl .brand{letter-spacing:0!important}
.rtl .hero h1{line-height:1.30;font-weight:700}
.rtl .section-head h2{line-height:1.38;font-weight:700}
.rtl .article-hero h1{line-height:1.40;font-weight:700}
.rtl .contact-inner h2{line-height:1.52;font-weight:700;max-width:980px}
.rtl .card h3{line-height:1.46;font-weight:600}
.rtl .prose h2{line-height:1.44;font-weight:700}
.rtl .prose h3{line-height:1.55;font-weight:600}
.rtl .hero-copy,.rtl .section-head p,.rtl .card p,.rtl .timeline-row p,.rtl .prose p,.rtl .prose li{line-height:1.9}
.rtl .eyebrow,.rtl .kicker,.rtl .num{text-transform:none;letter-spacing:0}

.site-header{view-transition-name:site-header}
.brand-mark{transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s}
.brand:hover .brand-mark{transform:rotate(-3deg) scale(1.04);border-color:var(--copper)}

.nav-links a{padding:.46rem .06rem;transition:opacity .22s,color .22s,transform .22s}
.nav-links a.active{opacity:1;color:var(--charcoal);font-weight:760}
.nav-links a.active:after{right:0;height:2px}
.nav-links a:active,.lang-switch a:active,.btn:active,.card:active{transform:scale(.97)}

.tap-ripple{
  position:fixed;z-index:9998;width:10px;height:10px;border:1.5px solid var(--copper);
  border-radius:999px;pointer-events:none;transform:translate(-50%,-50%) scale(.3);
  animation:tap-ripple .52s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes tap-ripple{0%{opacity:.9;transform:translate(-50%,-50%) scale(.25)}100%{opacity:0;transform:translate(-50%,-50%) scale(7)}}

.btn,.email-box,.lang-switch a{position:relative;overflow:hidden}
.btn:after,.email-box:after{
  content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22),transparent 70%);
  transform:translateX(-130%);transition:transform .55s ease
}
.btn:hover:after,.email-box:hover:after{transform:translateX(130%)}

.menu-btn{width:42px;height:42px;border-radius:999px;transition:background .2s}
.menu-btn:hover{background:rgba(29,29,27,.06)}
.menu-btn span{transition:transform .25s,opacity .25s}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}

/* Comparison system */
.compare-shell{border:1px solid var(--line);border-radius:32px;overflow:hidden;background:var(--ivory);box-shadow:0 22px 70px rgba(29,29,27,.07)}
.compare-head,.compare-row{display:grid;grid-template-columns:minmax(180px,.72fr) 1fr 1fr}
.compare-head{background:var(--charcoal);color:var(--bone)}
.compare-head>div,.compare-row>div{padding:22px 26px}
.compare-head strong{font-size:1.04rem}
.compare-head .country{color:var(--copper-light)}
.compare-row{border-top:1px solid var(--line)}
.compare-row .metric{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--stone)}
.rtl .compare-row .metric{text-transform:none;letter-spacing:0}
.compare-value{font-size:1.45rem;font-weight:760;line-height:1.18;letter-spacing:-.025em}
.rtl .compare-value{letter-spacing:0}
.compare-note{display:block;color:var(--stone);font-size:.82rem;margin-top:7px;line-height:1.45}
.source-chip{display:inline-flex;margin-top:10px;padding:.26rem .48rem;border:1px solid var(--line);border-radius:999px;font-size:.68rem;font-weight:800;color:var(--copper-dark);background:#fff}
.compare-foot{padding:20px 26px;border-top:1px solid var(--line);font-size:.82rem;color:var(--stone);background:var(--bone)}

/* Profile method */
.method-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:28px}
.method-step{padding:20px;border-top:1px solid var(--line);min-height:170px}
.method-step span{font-size:.72rem;color:var(--copper-dark);font-weight:800}
.method-step h3{font-size:1rem;line-height:1.25;margin:24px 0 8px}
.method-step p{font-size:.84rem;color:var(--stone);margin:0}
.profile-strip{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.profile-strip .pill{background:rgba(255,255,255,.5)}
.cv-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

/* Current context / editorial news */
.context-card{display:grid;grid-template-columns:.72fr 1.28fr;border-radius:30px;overflow:hidden;border:1px solid var(--line);background:var(--ivory)}
.context-stat{background:var(--charcoal);color:var(--bone);padding:38px;display:flex;flex-direction:column;justify-content:space-between;min-height:360px}
.context-stat .date{color:var(--copper-light);font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.context-stat .big{font-size:clamp(3rem,6vw,6.2rem);line-height:.86;letter-spacing:-.06em;font-weight:780}
.rtl .context-stat .big{letter-spacing:0}
.context-copy{padding:42px}
.context-copy h3{font-size:clamp(1.8rem,3vw,3rem);line-height:1.02;letter-spacing:-.04em;margin:0 0 18px}
.rtl .context-copy h3{letter-spacing:0;line-height:1.2}
.context-copy p{color:var(--stone)}
.context-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}

/* Better fluid behavior */
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero{min-height:calc(100svh - 76px)}
.hero-grid{grid-template-columns:minmax(0,1.13fr) minmax(360px,.87fr)}
.system-map{aspect-ratio:1/1;min-height:unset}
.article{grid-template-columns:minmax(180px,240px) minmax(0,780px)}
.prose{min-width:0}

@media (max-width:1100px){
  .method-grid{grid-template-columns:repeat(3,1fr)}
  .hero-grid{grid-template-columns:1fr .78fr;gap:38px}
  .system-map{min-width:0}
}
@media (max-width:900px){
  .nav{min-height:70px;gap:12px}
  .brand{margin-right:auto}.rtl .brand{margin-left:auto;margin-right:0}
  .menu-btn{display:block;order:4}
  .nav-links{
    display:flex;position:absolute;top:calc(100% + 8px);left:20px;right:20px;
    flex-direction:column;align-items:stretch;gap:4px;padding:12px;
    background:rgba(249,247,242,.97);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:22px;
    box-shadow:var(--shadow);opacity:0;transform:translateY(-8px) scale(.985);visibility:hidden;pointer-events:none;
    transition:opacity .22s,transform .22s,visibility .22s
  }
  .nav-links.open{opacity:1;transform:none;visibility:visible;pointer-events:auto}
  .nav-links a{padding:.78rem 1rem;border-radius:12px}
  .nav-links a:hover,.nav-links a.active{background:var(--bone)}
  .nav-links a:after{display:none}
  .site-header .lang-switch{display:flex;order:3;margin-inline-start:auto}
  .lang-switch a{min-width:31px;padding:.35rem .42rem;font-size:.69rem}
  .hero-grid{grid-template-columns:1fr;gap:34px;padding:64px 0 42px}
  .system-map{max-width:620px;width:100%;justify-self:center}
  .compare-head,.compare-row{grid-template-columns:160px 1fr 1fr}
  .compare-head>div,.compare-row>div{padding:19px 18px}
  .context-card{grid-template-columns:1fr}
  .context-stat{min-height:270px}
}
@media (max-width:700px){
  .shell{width:min(var(--max),calc(100% - 28px))}
  .brand{gap:9px;font-size:.86rem}.brand-mark{width:34px;height:34px}
  .hero{min-height:auto}.hero h1{font-size:clamp(3rem,14.5vw,5.3rem);line-height:.91}
  .rtl .hero h1{font-size:clamp(2.75rem,12.5vw,4.6rem);line-height:1.08}
  .hero-copy{font-size:1rem;line-height:1.7}
  .system-map{aspect-ratio:1/.9;border-radius:22px}
  .section{padding:78px 0}.section-head{gap:18px;margin-bottom:36px}
  .section-head h2{font-size:clamp(2.15rem,10vw,3.4rem)}
  .rtl .section-head h2{font-size:clamp(2rem,8.8vw,3.1rem)}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .card{min-height:220px;padding:24px}.card h3{margin-top:38px}
  .method-grid{grid-template-columns:1fr 1fr}.method-step{min-height:150px;padding:16px}
  .compare-shell{border-radius:24px;overflow:visible;border:0;background:transparent;box-shadow:none}
  .compare-head{display:none}
  .compare-row{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-bottom:12px;background:var(--ivory)}
  .compare-row .metric{grid-column:1/-1;background:var(--bone);padding:12px 16px;border-bottom:1px solid var(--line)}
  .compare-row>div:not(.metric){padding:18px 16px}
  .compare-row>div:nth-child(3){border-inline-start:1px solid var(--line)}
  .compare-value{font-size:1.18rem}
  .compare-foot{border:1px solid var(--line);border-radius:16px;background:var(--bone)}
  .context-stat,.context-copy{padding:28px}.context-stat{min-height:240px}
  .context-stat .big{font-size:clamp(3.6rem,18vw,5.4rem)}
  .article-hero{padding:62px 0 46px}.article-hero h1{font-size:clamp(2.6rem,13vw,4.7rem)}
  .rtl .article-hero h1{font-size:clamp(2.35rem,10.5vw,4.2rem)}
  .article{padding:56px 0 82px}
}
@media (max-width:460px){
  .site-header .shell{width:calc(100% - 16px)}
  .nav{gap:6px}.brand{font-size:.78rem}.brand-mark{width:31px;height:31px}
  .lang-switch{gap:1px;padding:2px}.lang-switch a{min-width:28px;padding:.32rem .3rem;font-size:.63rem}
  .menu-btn{width:36px;height:36px;padding:6px}
  .method-grid{grid-template-columns:1fr}
  .compare-row{grid-template-columns:1fr}
  .compare-row .metric{grid-column:auto}
  .compare-row>div:nth-child(3){border-inline-start:0;border-top:1px solid var(--line)}
  .compare-row>div:nth-child(2)::before,.compare-row>div:nth-child(3)::before{display:block;font-size:.66rem;font-weight:800;color:var(--copper-dark);margin-bottom:5px}
  html[lang="en"] .compare-row>div:nth-child(2)::before{content:"FINLAND"}
  html[lang="en"] .compare-row>div:nth-child(3)::before{content:"SWITZERLAND"}
  html[lang="fi"] .compare-row>div:nth-child(2)::before{content:"SUOMI"}
  html[lang="fi"] .compare-row>div:nth-child(3)::before{content:"SVEITSI"}
  html[lang="ar"] .compare-row>div:nth-child(2)::before{content:"فنلندا"}
  html[lang="ar"] .compare-row>div:nth-child(3)::before{content:"سويسرا"}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  .tap-ripple{display:none}
}


/* =========================
   V3 profile / evidence layer
   ========================= */
.profile-lead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:20px;align-items:stretch}
.profile-story{border:1px solid var(--line);border-radius:30px;padding:42px;background:var(--ivory)}
.profile-story h2{font-size:clamp(2.2rem,4vw,4.2rem);line-height:1.02;letter-spacing:-.045em;margin:0 0 20px}
.rtl .profile-story h2{letter-spacing:0;line-height:1.18}
.profile-story p{color:var(--stone);font-size:1.02rem}
.profile-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.profile-fact{border:1px solid var(--line);border-radius:22px;padding:22px;background:var(--bone);display:flex;flex-direction:column;justify-content:space-between;min-height:155px}
.profile-fact .big{font-size:clamp(1.7rem,3vw,2.8rem);line-height:1;font-weight:800;letter-spacing:-.045em}
.rtl .profile-fact .big{letter-spacing:0}
.profile-fact small{font-size:.76rem;color:var(--stone);line-height:1.4}
.about-link{display:inline-flex;margin-top:22px;align-items:center;gap:8px;font-weight:800;color:var(--copper-dark)}
.about-link:after{content:'↗';transition:transform .2s}.about-link:hover:after{transform:translate(3px,-3px)}
.rtl .about-link:after{transform:scaleX(-1)}.rtl .about-link:hover:after{transform:scaleX(-1) translate(-3px,-3px)}
.education-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.edu-card{border-top:2px solid var(--copper);padding:22px 4px 8px}
.edu-card .year{font-size:.72rem;font-weight:800;color:var(--copper-dark);letter-spacing:.08em}
.edu-card h3{font-size:1.2rem;line-height:1.25;margin:14px 0 8px}.edu-card p{color:var(--stone);margin:0;font-size:.9rem}
.tool-cloud{display:flex;gap:9px;flex-wrap:wrap}.tool-cloud .pill{background:var(--bone)}
.statement{font-size:clamp(1.65rem,3.2vw,3rem);line-height:1.2;letter-spacing:-.035em;max-width:980px;margin:0}
.rtl .statement{letter-spacing:0;line-height:1.45}

/* Higher legibility for small technical text */
.compare-note,.method-step p,.context-copy p,.source small,.section-head p,.timeline-row p,.card p{font-weight:480}
.source-chip{transition:transform .18s,border-color .18s,background .18s}.source-chip:hover{transform:translateY(-1px);border-color:rgba(143,75,45,.45);background:var(--bone)}

@media (max-width:900px){.profile-lead{grid-template-columns:1fr}.education-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.profile-story{padding:28px}.profile-facts{grid-template-columns:1fr 1fr}.profile-fact{min-height:132px;padding:18px}.education-grid{grid-template-columns:1fr}}
@media (max-width:400px){.profile-facts{grid-template-columns:1fr}}


/* =========================
   V4 — design logic & engineering concept studies
   ========================= */
.study-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.study-card{border:1px solid var(--line);border-radius:28px;padding:32px;background:var(--ivory);position:relative;overflow:hidden;min-height:300px;transition:transform .24s,border-color .24s,box-shadow .24s}
.study-card:hover{transform:translateY(-4px);border-color:rgba(184,110,69,.45);box-shadow:var(--shadow)}
.study-card:before{content:'';position:absolute;right:-65px;bottom:-80px;width:210px;height:210px;border:1px solid rgba(184,110,69,.2);border-radius:50%}
.rtl .study-card:before{right:auto;left:-65px}
.study-card .tag{display:inline-flex;border:1px solid rgba(143,75,45,.28);color:var(--copper-dark);border-radius:999px;padding:.42rem .65rem;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.study-card h3{font-size:clamp(1.55rem,2.5vw,2.35rem);line-height:1.08;letter-spacing:-.035em;margin:52px 0 12px;max-width:620px}.rtl .study-card h3{letter-spacing:0;line-height:1.28}
.study-card p{color:var(--stone);max-width:620px;margin:0}.study-card .arrow{position:absolute;top:26px;right:28px;color:var(--copper-dark);font-size:1.2rem}.rtl .study-card .arrow{right:auto;left:28px;transform:scaleX(-1)}
.phase-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:30px 0}
.phase-track{border:1px solid var(--line);border-radius:26px;padding:26px;background:var(--bone)}
.phase-track h3{margin:0 0 20px;font-size:1.15rem}.phase-list{display:grid;gap:8px;counter-reset:ph}
.phase-item{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;padding:10px;border-radius:14px;background:rgba(249,247,242,.75);font-size:.87rem}
.phase-item:before{counter-increment:ph;content:counter(ph,decimal-leading-zero);width:30px;height:30px;display:grid;place-items:center;border:1px solid rgba(143,75,45,.28);border-radius:50%;color:var(--copper-dark);font-size:.68rem;font-weight:800}
.logic-table{display:grid;border:1px solid var(--line);border-radius:28px;overflow:hidden;margin:34px 0;background:var(--ivory)}
.logic-row{display:grid;grid-template-columns:.55fr 1fr 1fr;border-bottom:1px solid var(--line)}.logic-row:last-child{border-bottom:0}
.logic-row>div{padding:20px}.logic-row>div+div{border-inline-start:1px solid var(--line)}
.logic-head{background:var(--charcoal);color:var(--bone);font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.logic-head>div+div{border-color:var(--line-dark)}
.logic-label{font-weight:800}.logic-copy{color:var(--stone);font-size:.9rem}
.horizon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}.horizon{border-top:2px solid var(--copper);padding:18px 4px}.horizon strong{display:block;margin-bottom:7px}.horizon span{font-size:.87rem;color:var(--stone)}
.blast-visual{border:1px solid var(--line);border-radius:30px;background:var(--charcoal);min-height:390px;overflow:hidden;position:relative;margin:30px 0;color:var(--bone)}
.blast-visual svg{position:absolute;inset:0;width:100%;height:100%}.blast-wave{fill:none;stroke:rgba(193,122,82,.58);stroke-width:2}.blast-ray{stroke:rgba(237,230,218,.55);stroke-width:1.4;stroke-dasharray:6 7}.blast-wall{fill:rgba(237,230,218,.12);stroke:rgba(237,230,218,.55);stroke-width:2}.blast-hit{fill:var(--copper)}
.blast-label{position:absolute;padding:.45rem .65rem;border:1px solid var(--line-dark);border-radius:999px;background:rgba(29,29,27,.68);font-size:.72rem;font-weight:700;backdrop-filter:blur(8px)}
.bl1{left:12%;top:18%}.bl2{right:11%;top:35%}.rtl .bl1{left:auto;right:12%}.rtl .bl2{right:auto;left:11%}
.concept-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0}.concept-box{border:1px solid var(--line);border-radius:24px;padding:28px;background:var(--bone)}.concept-box h3{margin:0 0 10px;font-size:1.35rem}.concept-box p{margin:0;color:var(--stone)}
.scope-lock{border:1px solid rgba(143,75,45,.32);border-radius:20px;padding:20px 22px;background:rgba(184,110,69,.07);margin:30px 0}.scope-lock strong{color:var(--copper-dark)}
.source-stack{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 0}.source-stack a{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:.48rem .7rem;font-size:.72rem;font-weight:800;color:var(--copper-dark);background:var(--ivory)}
@media(max-width:900px){.phase-compare,.study-grid,.concept-split{grid-template-columns:1fr}.horizon-grid{grid-template-columns:1fr 1fr}.logic-row{grid-template-columns:1fr 1fr}.logic-row>div:first-child{grid-column:1/-1;border-bottom:1px solid var(--line)}.logic-head>div:first-child{display:none}.logic-head>div:nth-child(2),.logic-head>div:nth-child(3){grid-row:1}.logic-head>div:nth-child(2){grid-column:1}.logic-head>div:nth-child(3){grid-column:2}}
@media(max-width:620px){.horizon-grid{grid-template-columns:1fr}.logic-row{grid-template-columns:1fr}.logic-row>div{padding:16px}.logic-row>div+div{border-inline-start:0;border-top:1px solid var(--line)}.logic-head{display:none}.blast-visual{min-height:310px}.bl1{left:6%;top:12%}.bl2{right:6%;top:38%}.rtl .bl1{left:auto;right:6%}.rtl .bl2{right:auto;left:6%}}

@media (max-width:660px){
  .rtl .hero h1{font-size:clamp(2.65rem,13.5vw,4.35rem);line-height:1.22}
  .rtl .contact-inner h2{font-size:clamp(2rem,10vw,3.55rem);line-height:1.38}
  .rtl .section-head h2{line-height:1.32}
}

/* =========================
   V5.2 Latin hero typography fix
   Prevent oversized EN/FI titles from overlapping the system map
   and give multi-line headings safer vertical rhythm.
   ========================= */
html[lang="en"] .hero-grid,
html[lang="fi"] .hero-grid{
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:56px;
}
html[lang="en"] .hero-grid > *,
html[lang="fi"] .hero-grid > *{min-width:0}

html[lang="en"] .hero h1{
  font-size:clamp(3.15rem,5.35vw,6rem);
  line-height:.98;
  letter-spacing:-.047em;
  max-width:820px;
  text-wrap:balance;
}
html[lang="fi"] .hero h1{
  font-size:clamp(3rem,4.75vw,5.35rem);
  line-height:1.01;
  letter-spacing:-.043em;
  max-width:850px;
  text-wrap:balance;
}

html[lang="en"] .section-head h2,
html[lang="fi"] .section-head h2{line-height:1.08}
html[lang="en"] .article-hero h1,
html[lang="fi"] .article-hero h1{line-height:1.04}
html[lang="en"] .contact-inner h2,
html[lang="fi"] .contact-inner h2{line-height:1.08}
html[lang="en"] .card h3,
html[lang="fi"] .card h3{line-height:1.22}

@media (max-width:1200px) and (min-width:901px){
  html[lang="en"] .hero-grid,
  html[lang="fi"] .hero-grid{
    grid-template-columns:minmax(0,1.02fr) minmax(330px,.98fr);
    gap:38px;
  }
  html[lang="en"] .hero h1{font-size:clamp(3rem,5.6vw,5.15rem);line-height:1}
  html[lang="fi"] .hero h1{font-size:clamp(2.85rem,4.95vw,4.75rem);line-height:1.03}
}

@media (max-width:900px){
  html[lang="en"] .hero-grid,
  html[lang="fi"] .hero-grid{grid-template-columns:1fr;gap:34px}
  html[lang="en"] .hero h1,
  html[lang="fi"] .hero h1{max-width:760px}
}

@media (max-width:700px){
  html[lang="en"] .hero h1{font-size:clamp(2.75rem,13vw,4.55rem);line-height:1.02;letter-spacing:-.04em}
  html[lang="fi"] .hero h1{font-size:clamp(2.55rem,11.8vw,4.1rem);line-height:1.06;letter-spacing:-.035em}
}

/* =========================
   V5.3 Finnish hero refinement
   Keep long Finnish headline fully inside the text column.
   ========================= */
html[lang="fi"] .hero-grid{
  grid-template-columns:minmax(0,.96fr) minmax(390px,1.04fr);
  gap:72px;
}
html[lang="fi"] .hero h1{
  font-size:clamp(2.75rem,4.15vw,4.8rem);
  line-height:1.055;
  letter-spacing:-.035em;
  max-width:740px;
  text-wrap:balance;
}
html[lang="fi"] .hero-copy{max-width:690px}

@media (max-width:1200px) and (min-width:901px){
  html[lang="fi"] .hero-grid{
    grid-template-columns:minmax(0,.95fr) minmax(350px,1.05fr);
    gap:48px;
  }
  html[lang="fi"] .hero h1{
    font-size:clamp(2.65rem,4.35vw,4.25rem);
    line-height:1.07;
    max-width:680px;
  }
}

@media (max-width:900px){
  html[lang="fi"] .hero-grid{grid-template-columns:1fr;gap:34px}
  html[lang="fi"] .hero h1{max-width:760px}
}

@media (max-width:700px){
  html[lang="fi"] .hero h1{
    font-size:clamp(2.4rem,10.7vw,3.85rem);
    line-height:1.09;
    letter-spacing:-.028em;
  }
}

/* =========================
   V5.4 Finnish hero balance
   Match EN visual map scale more closely and keep headline clear.
   ========================= */
html[lang="fi"] .hero-grid{
  grid-template-columns:minmax(0,1.06fr) minmax(330px,.94fr);
  gap:64px;
}
html[lang="fi"] .hero h1{
  font-size:clamp(2.65rem,3.95vw,4.55rem);
  line-height:1.07;
  max-width:760px;
}
html[lang="fi"] .system-map{
  width:92%;
  max-width:560px;
  justify-self:end;
}

@media (max-width:1200px) and (min-width:901px){
  html[lang="fi"] .hero-grid{
    grid-template-columns:minmax(0,1.04fr) minmax(320px,.96fr);
    gap:42px;
  }
  html[lang="fi"] .hero h1{
    font-size:clamp(2.55rem,4.05vw,4.05rem);
    line-height:1.08;
    max-width:700px;
  }
  html[lang="fi"] .system-map{
    width:90%;
    max-width:520px;
  }
}

@media (max-width:900px){
  html[lang="fi"] .hero-grid{grid-template-columns:1fr;gap:34px}
  html[lang="fi"] .system-map{width:100%;max-width:620px;justify-self:center}
}

/* =========================
   V5.5 unified system-map scale + Arabic typography lock
   ========================= */

/* Keep the systems-thinking diagram the same visual size in EN / FI / AR. */
html[lang="en"] .system-map,
html[lang="fi"] .system-map,
html[lang="ar"] .system-map{
  width:100%;
  max-width:620px;
  aspect-ratio:1/1;
  min-height:unset;
  justify-self:center;
}

/* Finnish keeps its safer text proportions without changing the diagram size. */
html[lang="fi"] .hero-grid{
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:56px;
}
html[lang="fi"] .hero h1{
  font-size:clamp(2.55rem,3.75vw,4.35rem);
  line-height:1.09;
  max-width:760px;
  letter-spacing:-.03em;
}

/* Lock the approved Arabic font across the Arabic site. */
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] p,
html[lang="ar"] a,
html[lang="ar"] span,
html[lang="ar"] li{
  font-family:"Tajawal",Tahoma,Arial,sans-serif;
}
html[lang="ar"] .hero h1{line-height:1.30;font-weight:700}
html[lang="ar"] .contact-inner h2{line-height:1.52;font-weight:700}

@media (max-width:1200px) and (min-width:901px){
  html[lang="fi"] .hero-grid{
    grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
    gap:40px;
  }
  html[lang="fi"] .hero h1{
    font-size:clamp(2.45rem,3.9vw,3.95rem);
    line-height:1.10;
  }
  html[lang="en"] .system-map,
  html[lang="fi"] .system-map,
  html[lang="ar"] .system-map{max-width:560px}
}

@media (max-width:900px){
  html[lang="en"] .system-map,
  html[lang="fi"] .system-map,
  html[lang="ar"] .system-map{
    width:100%;
    max-width:620px;
    justify-self:center;
  }
}

/* =========================
   V5.6 Arabic hero size alignment
   Match the approved EN/FI visual scale while preserving Tajawal.
   ========================= */
html[lang="ar"] .hero h1{
  font-size:clamp(2.65rem,3.95vw,4.55rem);
  line-height:1.18;
  max-width:760px;
  font-weight:700;
  letter-spacing:0;
  text-wrap:balance;
}

@media (max-width:1200px) and (min-width:901px){
  html[lang="ar"] .hero h1{
    font-size:clamp(2.55rem,4.05vw,4.05rem);
    line-height:1.20;
    max-width:700px;
  }
}

@media (max-width:700px){
  html[lang="ar"] .hero h1{
    font-size:clamp(2.35rem,10.7vw,3.85rem);
    line-height:1.22;
  }
}