/* RADAR site v4.3 — 3D radar section, icons, motion on every element, FORMAÉ logo, capitals. */

/* ---------- capitals: every EN heading / title / label ---------- */
html[lang=en] .qa summary span,html[lang=en] .nav-links a,html[lang=en] .mnav ul a,html[lang=en] .f-name,html[lang=en] .c-k,
html[lang=en] .soon,html[lang=en] .rdr-pill,html[lang=en] .rdr-blip-l,html[lang=en] .rs-k,html[lang=en] .p-role,
html[lang=en] .pill,html[lang=en] .sticky,html[lang=en] .link,html[lang=en] .c-sub,html[lang=en] .stepper li,html[lang=en] .map-acts a,html[lang=en] .map-acts button{text-transform:uppercase}
html[lang=en] .qa summary span{letter-spacing:.04em;font-size:clamp(16px,1.25vw,19px);font-weight:600;line-height:1.4}
html[lang=en] .nav-links a{letter-spacing:.14em;font-size:12.5px}
html[lang=en] .f-name{letter-spacing:.08em}
html[lang=en] .c-k,html[lang=en] .soon,html[lang=en] .rs-k,html[lang=en] .p-role{letter-spacing:.2em;font-size:11.5px;font-weight:600}
html[lang=en] .pill,html[lang=en] .sticky,html[lang=en] .link,html[lang=en] .c-sub{letter-spacing:.1em;font-size:12.5px}

/* ---------- icons: brand line set + draw-on ---------- */
.ico{width:24px;height:24px;flex:none;color:var(--c,var(--teal));overflow:visible}
.ico-sm{width:16px;height:16px;display:inline-block;vertical-align:-3px;margin-inline-end:8px}
.js .ico.m path,.js .ico.m circle,.js .ico.m rect{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) calc(var(--mi,0) * 110ms + 120ms)}
.js .ico.m.m-in path,.js .ico.m.m-in circle,.js .ico.m.m-in rect{stroke-dashoffset:0}
.ch-ico{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;border:1px solid var(--line2);margin-bottom:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,0));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:icoFloat 6s ease-in-out infinite;transition:transform .6s var(--ease),border-color .4s}
.ch-ico .ico{width:26px;height:26px}
.chapter:hover .ch-ico{transform:translateY(-4px) rotate(-4deg);border-color:var(--c)}
.ap-ico{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);margin-bottom:18px;color:var(--teal);animation:icoFloat 7s ease-in-out infinite}
.ap li:nth-child(2) .ap-ico{animation-delay:-1.6s}.ap li:nth-child(3) .ap-ico{animation-delay:-3.2s}.ap li:nth-child(4) .ap-ico{animation-delay:-4.8s}
.ap-ico .ico{--c:var(--teal)}
.c-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--line2);margin-bottom:16px;transition:border-color .4s,transform .6s var(--ease)}
.c-ico .ico{--c:var(--teal);width:20px;height:20px}
.c-row:hover .c-ico{border-color:var(--teal);transform:translateY(-3px)}
.c-sub .ico{--c:currentColor}
.qa summary i{display:grid;place-items:center}
.qa summary i:before,.qa summary i:after{display:none}
.qa-ico{width:16px;height:16px;--c:var(--fg);transition:transform .6s var(--ease)}
.qa[open] .qa-ico{transform:rotate(135deg)}
.qa summary:hover .qa-ico{transform:rotate(90deg)}
.qa[open] summary:hover .qa-ico{transform:rotate(135deg)}
@keyframes icoFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}

/* socials: monochrome glyphs */
.socials{gap:8px}
.soc{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);color:var(--fg2);transition:color .3s,border-color .3s,transform .5s var(--ease),background .4s}
.soc .ico{--c:currentColor;width:19px;height:19px}
.soc:hover{color:#fff;border-color:var(--fg2);transform:translateY(-3px) rotate(-6deg);background:rgba(255,255,255,.04)}
.soc-n{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- generic element motion (fade + rise + de-blur, staggered) ---------- */
.js .m:not(.ico):not(.rule){opacity:0;translate:0 22px;filter:blur(6px);transition:opacity 1.1s var(--ease) calc(var(--mi,0) * 90ms),translate 1.2s var(--ease) calc(var(--mi,0) * 90ms),filter 1.2s var(--ease) calc(var(--mi,0) * 90ms)}
.js .m.m-in:not(.ico):not(.rule){opacity:1;translate:0 0;filter:none}
.js .tags li.m{translate:0 12px}
.js .tags li.m.m-in{animation:tagFloat 7s ease-in-out calc(var(--mi,0) * -1.3s) infinite}
@keyframes tagFloat{0%,100%{translate:0 0}50%{translate:0 -3px}}
/* self-drawing dividers */
.rule{display:block;height:1px;background:linear-gradient(90deg,transparent,var(--line2) 12%,var(--line2) 88%,transparent);transform-origin:var(--ro,0) 50%;transform:scaleX(0);transition:transform 1.8s var(--ease)}
[dir=rtl] .rule{--ro:100%}
.rule.m-in{transform:scaleX(1)}
.wrap>.rule,.partner>.rule{max-width:var(--max);margin-inline:auto}
/* buttons: sheen + breathing outline */
.btn,.btn-ghost,.pill,.sticky{position:relative;overflow:hidden;isolation:isolate}
.btn:after,.btn-ghost:after,.pill:after,.sticky:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(120px circle at var(--sx,50%) 50%,rgba(116,188,198,.28),transparent 70%)}
.btn:hover:after,.btn-ghost:hover:after,.pill:hover:after,.sticky:hover:after{opacity:1}
.btn-ghost{animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:inset 0 0 0 1px rgba(201,202,210,.18)}50%{box-shadow:inset 0 0 0 1px rgba(201,202,210,.34)}}
/* images: slow cinematic drift once revealed */
.media img{animation:kb 22s ease-in-out infinite alternate;transform-origin:50% 40%}
@keyframes kb{from{scale:1}to{scale:1.06}}
/* drifting background grids */
.work-s,.approach,.faq,.brief,.about{position:relative}
.sec-grid{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:88px 88px;mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent);-webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent);
  animation:gridDrift 40s linear infinite}
@keyframes gridDrift{to{background-position:88px 88px,88px 88px}}
.work-s>.wrap,.approach>.wrap,.faq>.wrap,.brief>.wrap,.about>.wrap{position:relative;z-index:1}

/* ---------- 3D RADAR section ---------- */
.rdr-s{position:relative;padding:clamp(70px,9vw,140px) 0;overflow:clip}
.rdr-grid-bg{position:absolute;inset:-10% 0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:72px 72px;mask-image:radial-gradient(55% 60% at 70% 50%,#000,transparent);-webkit-mask-image:radial-gradient(55% 60% at 70% 50%,#000,transparent);
  animation:gridDrift 30s linear infinite}
[dir=rtl] .rdr-grid-bg{mask-image:radial-gradient(55% 60% at 30% 50%,#000,transparent);-webkit-mask-image:radial-gradient(55% 60% at 30% 50%,#000,transparent)}
.rdr-wrap{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
.rdr-copy .lede{margin-top:26px;max-width:30em}
.rdr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.rdr-stats li{display:flex;flex-direction:column;gap:6px}
.rs-k{color:var(--teal)}
.rs-v{font-size:14.5px;color:var(--soft);line-height:1.45}
.rdr{position:relative;perspective:1400px}
.rdr-stage{position:relative;width:100%;aspect-ratio:1;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s linear}
.rdr-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.rdr-cv-blur{filter:blur(16px);opacity:.38;transform:scale(1.04) translateZ(-60px)}
.rdr-core{position:absolute;left:50%;top:50%;width:19%;aspect-ratio:1;transform:translate(-50%,-50%);transform-style:preserve-3d;pointer-events:none}
.rdr-sph{width:100%;height:100%;overflow:visible}
.rdr-sph .layer{transform-box:fill-box;transform-origin:50% 50%;animation:bandWave 4.2s ease-in-out infinite}
.rdr-sph .l1{animation-delay:-1.4s}.rdr-sph .l2{animation-delay:-2.8s}
@keyframes bandWave{0%,100%{transform:translateX(0) scaleY(1)}50%{transform:translateX(1.6%) scaleY(.965)}}
.rdr-core:after{content:"";position:absolute;inset:-25%;border-radius:50%;background:radial-gradient(closest-side,rgba(112,112,172,.22),transparent);filter:blur(18px);z-index:-1}
.rdr-pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(calc(.85 + var(--fz,1) * .15));display:inline-flex;align-items:center;gap:10px;
  padding:11px 20px;border-radius:999px;border:1px solid rgba(201,204,222,.22);background:rgba(19,20,27,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font:600 13px/1 var(--f-b);letter-spacing:.24em;color:var(--fg2);white-space:nowrap;opacity:0;filter:blur(8px);
  transition:opacity 1.2s var(--ease),filter 1.2s var(--ease),border-color .4s,color .4s;will-change:left,top}
.rdr-pill i{width:6px;height:6px;border-radius:50%;background:var(--teal);opacity:calc(.35 + var(--hit,0) * .65);box-shadow:0 0 0 calc(var(--hit,0) * 6px) rgba(116,188,198,calc(var(--hit,0) * .18))}
.rdr-pill{border-color:rgba(201,204,222,calc(.18 + var(--hit,0) * .35));color:rgba(237,237,241,calc(.7 + var(--hit,0) * .3))}
.rdr.in .rdr-pill{opacity:1;filter:none}
.rdr.in .rdr-pill[data-i="1"]{transition-delay:.25s}.rdr.in .rdr-pill[data-i="2"]{transition-delay:.5s}
.lang-ar .rdr-pill,.lang-he .rdr-pill{letter-spacing:.02em;font-size:14.5px}
.rdr-blip-l{position:absolute;transform:translate(14px,-50%);font:600 10.5px/1 var(--f-b);letter-spacing:.22em;color:rgba(160,215,226,.9);white-space:nowrap;pointer-events:none;transition:opacity .3s}
[dir=rtl] .rdr-blip-l{transform:translate(calc(-100% - 14px),-50%)}
.lang-ar .rdr-blip-l,.lang-he .rdr-blip-l{letter-spacing:.02em;font-size:12.5px}

/* ---------- WORK cards: depth + line-art + glare + badge ---------- */
.work-frame{perspective:1200px;overflow:visible}
.work-depth{position:relative;border-radius:14px;overflow:hidden;transform-style:preserve-3d;transition:transform .15s linear;will-change:transform}
.work-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:.42;transition:opacity .8s var(--ease)}
.work-depth .media:not(.ph)+.work-art{opacity:.16}
.work:hover .work-art{opacity:.6}
.work-glare{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light}
.work-badge{position:absolute;top:16px;inset-inline-end:16px;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:rgba(11,12,17,.45);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform:translateZ(40px);
  transition:transform .6s var(--ease)}
.work-badge .ico{width:20px;height:20px}
.work:hover .work-badge{transform:translateZ(60px) rotate(-6deg)}
.soon-dot{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:var(--teal)}
.soon-dot:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--teal);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.soon{color:var(--teal)}

/* ---------- FORMAÉ logo ---------- */
.formae-logo{margin:0;display:grid;place-items:center;letter-spacing:0}
.formae-logo img{width:clamp(180px,19vw,280px);height:auto;opacity:.92;transition:opacity .5s,transform 1s var(--ease)}
.partner:hover .formae-logo img{opacity:1;transform:scale(1.03)}

@media (max-width:980px){
  .rdr-wrap{grid-template-columns:1fr}
  .rdr{max-width:620px;width:100%;margin:0 auto}
}
@media (max-width:640px){
  .rdr-stats{grid-template-columns:1fr;gap:14px}
  .rdr-pill{padding:8px 13px;font-size:10.5px;letter-spacing:.16em}
  .lang-ar .rdr-pill,.lang-he .rdr-pill{font-size:12.5px}
  .rdr-blip-l{display:none}
  .ch-ico{width:44px;height:44px;border-radius:12px}
}
@media (prefers-reduced-motion:reduce){
  .js .m:not(.ico):not(.rule){opacity:1;translate:none;filter:none;transition:none}
  .js .ico.m path,.js .ico.m circle,.js .ico.m rect{stroke-dashoffset:0;transition:none}
  .rule{transform:none;transition:none}
  .ch-ico,.ap-ico,.tags li,.media img,.sec-grid,.rdr-grid-bg,.btn-ghost,.soon-dot:after,.rdr-sph .layer{animation:none!important}
  .rdr-pill{opacity:1;filter:none;transition:none}
  .rdr-stage{transform:none}
}

html[lang=en] .marquee span{text-transform:uppercase;letter-spacing:.02em}
@media (max-width:560px){.nav-end>.pill{display:none}}
@media (max-width:640px){.work-meta .soon{grid-column:1/-1;white-space:normal;letter-spacing:.14em}}