:root{
  --navy:#03050E; --navy-2:#0A0F26; --steel:#2B3C72; --teal:#5773AF; --cyan:#446CCF;
  --slate:#737880; --white:#fff; --mist:#F8F7F3; --ice:#B7C8EB; --ink:#34426E; --head:#1F2C56; --paper:#FDFCFA;
  --ar:'Cairo','IBM Plex Sans Arabic',sans-serif; --arb:'IBM Plex Sans Arabic','Cairo',sans-serif;
  --lat:'Raleway','Open Sans',sans-serif; --latb:'Open Sans','IBM Plex Sans Arabic',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1); --pad:clamp(20px,5vw,72px); --max:1240px; --hdr:72px;
}
*{box-sizing:border-box;margin:0}
html{scroll-padding-top:var(--hdr)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{font-family:var(--arb);font-size:17px;line-height:1.9;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
html:is([lang=en],[lang=tr],[lang=zh]) body{font-family:var(--latb);line-height:1.75}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--ar);font-weight:800;line-height:1.35;text-wrap:balance}
html:is([lang=en],[lang=tr],[lang=zh]) h1,html:is([lang=en],[lang=tr],[lang=zh]) h2,html:is([lang=en],[lang=tr],[lang=zh]) h3{font-family:var(--lat);letter-spacing:.06em;text-transform:uppercase}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.skip{position:absolute;inset-inline-start:12px;top:-80px;background:var(--cyan);color:#fff;padding:10px 18px;font-weight:700;z-index:200;transition:top .2s}
.skip:focus{top:12px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 34px;background:var(--cyan);color:#fff;font:700 17px/1 var(--arb);text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:background .3s,transform .25s var(--ease),color .3s}
html:is([lang=en],[lang=tr],[lang=zh]) .btn{font-family:var(--lat);letter-spacing:.08em;text-transform:uppercase;font-size:14px}
.btn:hover{background:var(--white);transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--dark{background:var(--navy);color:var(--white)}
.btn--dark:hover{background:var(--steel);color:var(--white)}

/* header: four tabs with a top line, like the reference */
.top{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--hdr);display:flex;align-items:stretch;transition:background .4s,box-shadow .4s;color:var(--white)}
.top__in{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--pad);display:flex;align-items:stretch;gap:clamp(16px,3vw,48px)}
.top.is-solid{background:rgba(253,252,250,.96);color:var(--head);box-shadow:0 1px 0 rgba(3,5,14,.08)}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:34px;width:auto}
.brand .logo-d{display:none}
.top.is-solid .logo-l{display:none}
.top.is-solid .logo-d{display:block}
.top nav{display:flex;flex:1;align-items:stretch}
.tabs{position:relative;display:flex;flex:1;gap:8px;list-style:none;padding:0;align-items:stretch;justify-content:center}
.tabs a{position:relative;display:flex;align-items:center;justify-content:center;padding:0 clamp(12px,2vw,30px);text-decoration:none;font:600 16px/1 var(--arb);white-space:nowrap;opacity:.78;transition:opacity .3s}
html:is([lang=en],[lang=tr],[lang=zh]) .tabs a{font-family:var(--lat);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.tabs a:hover,.tabs a[aria-current=true]{opacity:1}
.tabs a::before{content:"";position:absolute;inset-inline:0;top:14px;height:2px;background:currentColor;opacity:.22}
.tabs__bar{position:absolute;top:14px;height:2px;background:var(--cyan);width:0;inset-inline-start:0;transition:transform .6s var(--ease),width .6s var(--ease)}
.langw{position:relative;align-self:center;flex:none;display:inline-block}
.lang{display:block;font:600 14px/1 var(--lat);letter-spacing:.1em;color:inherit;background:transparent;border:1px solid currentColor;padding:10px 16px;cursor:pointer;transition:background .25s,color .25s}
.lang:hover{background:var(--cyan);border-color:var(--cyan);color:#fff}
.burger{display:none;align-self:center;margin-inline-start:auto;width:44px;height:44px;background:transparent;border:1px solid currentColor;color:inherit;cursor:pointer;position:relative}
.burger i,.burger i::before,.burger i::after{position:absolute;left:12px;right:12px;height:2px;background:currentColor;content:"";transition:transform .3s var(--ease)}
.burger i{top:21px}.burger i::before{top:-7px;left:0;right:0}.burger i::after{top:7px;left:0;right:0}
.burger[aria-expanded=true] i{background:transparent}
.burger[aria-expanded=true] i::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] i::after{transform:translateY(-7px) rotate(-45deg)}

/* hero */
.hero{position:relative;min-height:100dvh;display:flex;align-items:center;overflow:hidden;background:var(--navy);color:var(--white);isolation:isolate}
.hero__bg{position:absolute;inset:-8% 0;z-index:-2;will-change:transform}

.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(95deg,rgba(3,5,14,.3) 0%,rgba(3,5,14,.55) 45%,rgba(3,5,14,.82) 100%)}
[dir=rtl] .hero::before{background:linear-gradient(265deg,rgba(3,5,14,.84) 0%,rgba(3,5,14,.58) 48%,rgba(3,5,14,.3) 100%)}
[dir=ltr] .hero::before{background:linear-gradient(95deg,rgba(3,5,14,.84) 0%,rgba(3,5,14,.58) 48%,rgba(3,5,14,.3) 100%)}
.hero__in{padding-block:calc(var(--hdr) + 40px) 80px;display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:clamp(20px,4vw,60px);align-items:center}
.hero h1{font-size:clamp(46px,8.2vw,118px);line-height:1.18;font-weight:900;margin-bottom:28px}
html:is([lang=en],[lang=tr],[lang=zh]) .hero h1{font-size:clamp(38px,6.6vw,96px);line-height:1.12;letter-spacing:.14em}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.hero h1 .w>span{display:inline-block;transform:translateY(105%)}
.hero h1 .c{color:var(--cyan)}
.is-ready .hero h1 .w>span{transform:none;transition:transform 1s var(--ease)}
.is-ready .hero h1 .w:nth-child(2)>span{transition-delay:.12s}
.is-ready .hero h1 .w:nth-child(3)>span{transition-delay:.24s}
.hero p{font-size:clamp(18px,1.7vw,23px);max-width:34em;color:#E3E7F4;margin-bottom:40px;opacity:0;transform:translateY(16px)}
.is-ready .hero p{opacity:1;transform:none;transition:opacity 1s .5s,transform 1s .5s var(--ease)}
.hero .btn{opacity:0}
.is-ready .hero .btn{opacity:1;transition:opacity 1s .75s,background .3s,transform .25s var(--ease)}
.conn{width:100%;height:auto;max-height:260px;overflow:visible}
.conn path{fill:none;stroke:var(--cyan);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1}
.conn circle{fill:var(--cyan);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0)}
.is-ready .conn path{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s .5s var(--ease)}
.is-ready .conn circle{opacity:1;transform:scale(1);transition:transform .6s var(--ease),opacity .4s}
.is-ready .conn circle:nth-of-type(1){transition-delay:.5s}
.is-ready .conn circle:nth-of-type(2){transition-delay:1.6s}

/* titled banner (who we are) */
.banner{position:relative;min-height:56vh;display:flex;align-items:center;overflow:hidden;color:var(--white);background:var(--steel);isolation:isolate}
.banner__bg{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}

.banner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,5,14,.5),rgba(3,5,14,.7))}
.banner h2{font-size:clamp(44px,8vw,110px);font-weight:900;line-height:1.2}
html:is([lang=en],[lang=tr],[lang=zh]) .banner h2{font-size:clamp(36px,6.4vw,92px);letter-spacing:.16em}
.banner h2 .c{color:var(--cyan)}
.banner .wrap{padding-block:90px}

.sec{padding-block:clamp(72px,10vw,140px)}
.sec h2.t{font-size:clamp(30px,4.2vw,54px);color:var(--head);margin-bottom:22px}
html:is([lang=en],[lang=tr],[lang=zh]) .sec h2.t{font-size:clamp(24px,3.2vw,40px)}
.lead{max-width:44em;font-size:clamp(17px,1.5vw,20px);color:#2c324a}

/* about */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,7vw,110px);align-items:start}
.fact{margin-top:36px;padding-inline-start:26px;border-inline-start:3px solid var(--cyan);font-size:clamp(19px,1.8vw,24px);font-weight:600;color:var(--steel);max-width:30em}
.about__img{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--steel)}
.about__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.about__img::after{content:"";position:absolute;inset:0;background:var(--steel);mix-blend-mode:color;opacity:.85}

/* timeline */
.tl{background:var(--mist)}
.tl__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(36px,7vw,110px);align-items:start}
.tl__head{position:sticky;top:calc(var(--hdr) + 40px)}
.line{position:relative;padding-inline-start:56px}
.line::before{content:"";position:absolute;inset-block:8px;inset-inline-start:11px;width:2px;background:rgba(43,60,114,.18)}
.line__fill{position:absolute;inset-block-start:8px;inset-inline-start:11px;width:2px;height:0;background:var(--cyan)}
.step{position:relative;padding-bottom:clamp(36px,5vw,64px)}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;inset-inline-start:-56px;top:10px;width:24px;height:24px;border-radius:50%;background:var(--mist);border:2px solid rgba(43,60,114,.3);transition:background .5s,border-color .5s,transform .6s var(--ease)}
.step.on::before{background:var(--cyan);border-color:var(--cyan);transform:scale(1.12)}
.step h3{font-size:clamp(22px,2.4vw,30px);color:var(--head);margin-bottom:8px}
html:is([lang=en],[lang=tr],[lang=zh]) .step h3{font-size:clamp(17px,1.7vw,21px)}
.step p{color:#333b5a;max-width:38em}
.step{opacity:.4;transform:translateX(0);transition:opacity .7s var(--ease)}
.step.on{opacity:1}

/* practice tiles with a second state */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:56px}
.tile{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--navy);color:var(--white);cursor:pointer;border:0;padding:0;text-align:start;font:inherit}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform 1.2s var(--ease),opacity .6s}
.tile::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(43,60,114,.35),rgba(3,5,14,.82));mix-blend-mode:multiply;transition:opacity .6s}
.tile__t{position:absolute;inset-inline:22px;bottom:22px;z-index:2;font:800 clamp(18px,1.7vw,23px)/1.4 var(--ar);transition:opacity .4s,transform .6s var(--ease)}
html:is([lang=en],[lang=tr],[lang=zh]) .tile__t{font-family:var(--lat);font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.tile__d{position:absolute;inset:0;z-index:3;padding:26px 22px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;background:var(--cyan);color:#fff;transform:translateY(101%);transition:transform .7s var(--ease)}
.tile__d b{font:800 clamp(18px,1.7vw,22px)/1.4 var(--ar)}
html:is([lang=en],[lang=tr],[lang=zh]) .tile__d b{font-family:var(--lat);font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.tile__d span{font-size:16px;line-height:1.7;font-weight:500}
.tile:hover img,.tile:focus-visible img{transform:scale(1.07)}
.tile:hover .tile__d,.tile:focus-visible .tile__d,.tile.open .tile__d{transform:none}
.tile:hover .tile__t,.tile.open .tile__t{opacity:0}

/* foreign entities: full-bleed photo + slider */
.fe{position:relative;overflow:hidden;color:var(--white);background:var(--navy);isolation:isolate}
.fe__bg{position:absolute;inset:-10% 0;z-index:-2;will-change:transform}

.fe::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,5,14,.9),rgba(43,60,114,.82))}
.fe h2.t{color:var(--white)}
.fe .lead{color:#D5DCEE}
.slider{margin-top:56px}
.slider__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:20px;scroll-behavior:smooth}
.slider__track::-webkit-scrollbar{display:none}
.slide{flex:0 0 min(100%,980px);scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);background:rgba(3,5,14,.55);border:1px solid rgba(183,200,235,.18)}
.slide img{width:100%;height:100%;min-height:300px;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.slide__img{position:relative;overflow:hidden}
.slide__img::after{content:"";position:absolute;inset:0;background:var(--cyan);mix-blend-mode:color;opacity:.55}
.slide__tx{padding:clamp(24px,3.4vw,48px)}
.slide h3{font-size:clamp(21px,2.2vw,28px);color:var(--cyan);margin-bottom:14px}
html:is([lang=en],[lang=tr],[lang=zh]) .slide h3{font-size:16px}
.slide p{color:#DCE1F0;font-size:17px}
.ctl{display:flex;align-items:center;gap:14px;margin-top:24px}
.ctl button.ar{width:48px;height:48px;border:1px solid rgba(183,200,235,.5);background:transparent;color:var(--white);cursor:pointer;position:relative;transition:background .3s,color .3s}
.ctl button.ar:hover{background:var(--cyan);color:#fff;border-color:var(--cyan)}
.ctl button.ar::after{content:"";position:absolute;inset:0;margin:auto;width:11px;height:11px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg) translate(-1px,1px)}
.ctl button.prev::after{transform:rotate(-135deg) translate(-1px,1px)}
[dir=rtl] .ctl button.next::after{transform:rotate(-135deg) translate(-1px,1px)}
[dir=rtl] .ctl button.prev::after{transform:rotate(45deg) translate(-1px,1px)}
.dots{display:flex;gap:10px;margin-inline-start:12px}
.dots button{width:12px;height:12px;border-radius:50%;border:0;padding:0;background:rgba(183,200,235,.35);cursor:pointer;transition:background .3s,transform .3s}
.dots button[aria-current=true]{background:var(--cyan);transform:scale(1.25)}
.fe .btn{margin-top:48px}

/* single marquee strip */
.strip{overflow:hidden;background:var(--paper);padding-block:0}
.strip__row{display:flex;width:max-content;animation:strip 60s linear infinite}
.strip:hover .strip__row{animation-play-state:paused}
.strip__row img{height:clamp(130px,16vw,220px);width:auto;margin-inline-end:8px;filter:grayscale(1)}
@keyframes strip{to{transform:translateX(-50%)}}
[dir=rtl] .strip__row{animation-name:strip-r}
@keyframes strip-r{to{transform:translateX(50%)}}

/* faq */
.faq{background:var(--paper)}
.faq__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(36px,7vw,110px);align-items:start}
details{border-top:2px solid var(--mist)}
details:last-child{border-bottom:2px solid var(--mist)}
summary{list-style:none;cursor:pointer;display:flex;gap:20px;justify-content:space-between;align-items:flex-start;padding:24px 0;font:700 clamp(18px,1.6vw,21px)/1.6 var(--arb);color:var(--head)}
html:is([lang=en],[lang=tr],[lang=zh]) summary{font-family:var(--latb);font-size:17px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:14px;height:14px;margin-top:.55em;background:linear-gradient(var(--cyan),var(--cyan)) center/100% 2px no-repeat,linear-gradient(var(--cyan),var(--cyan)) center/2px 100% no-repeat;transition:transform .4s var(--ease)}
details[open] summary::after{transform:rotate(90deg);background:linear-gradient(var(--cyan),var(--cyan)) center/100% 2px no-repeat}
.ans{padding:0 0 26px;color:#333b5a;max-width:42em}
.ans p+p{margin-top:12px}

/* contact */
.contact{background:var(--navy);color:var(--white);position:relative;overflow:hidden}
.contact h2.t{color:var(--white)}
.contact__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,7vw,110px)}
.contact .lead{color:#C7CEE2;margin-bottom:36px}
dl.det{display:grid;grid-template-columns:auto 1fr;gap:0 40px}
dl.det dt,dl.det dd{padding:20px 0;border-top:1px solid rgba(183,200,235,.22)}
dl.det dt{color:var(--cyan);font-weight:700}
dl.det dd a{text-decoration:none;transition:color .3s}
dl.det dd a:hover{color:var(--cyan)}
.em{margin-top:36px;padding:22px 26px;background:var(--steel);display:flex;gap:20px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.em b{font:800 20px/1.5 var(--ar)}
html:is([lang=en],[lang=tr],[lang=zh]) .em b{font-family:var(--lat);font-size:15px;letter-spacing:.08em;text-transform:uppercase}
footer{background:#02030A;color:#9FA7BF;text-align:center;padding:36px var(--pad);font-size:14px;line-height:1.7}

/* reveals (progressive: content visible without JS) */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}

@media (max-width:1100px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile{aspect-ratio:4/3}
}
@media (max-width:900px){
  :root{--hdr:64px}
  .burger{display:block}
  .tabs{position:fixed;inset:var(--hdr) 0 auto 0;background:var(--navy);flex-direction:column;gap:0;padding:8px var(--pad) 24px;transform:translateY(-130%);transition:transform .5s var(--ease);z-index:-1;color:var(--white)}
  .tabs.open{transform:none}
  .tabs a{justify-content:flex-start;padding:20px 0;border-bottom:1px solid rgba(183,200,235,.15);opacity:1;font-size:18px}
  .tabs a::before,.tabs__bar{display:none}
  .top{justify-content:space-between}
  .top__in{gap:12px}
  .langw{margin-inline-start:auto}
  .burger{margin-inline-start:0}
  .hero__in{grid-template-columns:1fr}
  .conn{display:none}
  .about,.tl__grid,.faq__grid,.contact__grid{grid-template-columns:1fr}
  .tl__head{position:static}
  .about__img{aspect-ratio:16/10;order:-1}
  .slide{grid-template-columns:1fr}
  .slide img{min-height:220px;max-height:260px}
  dl.det{grid-template-columns:1fr}
  dl.det dt{padding-bottom:0;border-bottom:0}
  dl.det dd{border-top:0;padding-top:4px}
}
@media (max-width:560px){
  .tiles{grid-template-columns:1fr}
  .tile{aspect-ratio:16/10}
  .btn{width:100%}
  .hero .btn{width:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .hero h1 .w>span{transform:none}
  .hero p,.hero .btn{opacity:1;transform:none}
  .conn path{stroke-dashoffset:0}.conn circle{opacity:1;transform:none}
  .step{opacity:1}
}

/* ---------- multi-page additions ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.25s ease both vt-out}
::view-transition-new(root){animation:.5s .05s ease both vt-in}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* background motion: looping video + drifting network */
.net{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.9}
.hero__bg,.banner__bg,.fe__bg{overflow:hidden}

/* inner page title banner */
.banner{min-height:62vh;padding-top:var(--hdr)}
.banner .bt{font-size:clamp(46px,8.4vw,120px);font-weight:900;line-height:1.18;color:var(--white)}
html:is([lang=en],[lang=tr],[lang=zh]) .banner .bt{font-size:clamp(36px,6.4vw,92px);letter-spacing:.16em}
.banner .bt .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.banner .bt .w>span{display:inline-block;transform:translateY(105%)}
.banner .bt .c{color:var(--cyan)}
.is-ready .banner .bt .w>span{transform:none;transition:transform 1s var(--ease)}
.is-ready .banner .bt .w:nth-child(2)>span{transition-delay:.14s}

.more{display:inline-flex;align-items:center;gap:12px;margin-top:32px;font:700 17px/1 var(--arb);color:var(--steel);text-decoration:none;padding-bottom:6px;border-bottom:2px solid var(--cyan);transition:color .3s,gap .3s var(--ease)}
html:is([lang=en],[lang=tr],[lang=zh]) .more{font-family:var(--lat);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.more:hover{color:var(--head);gap:18px}
.fe--teaser .wrap{padding-block:clamp(10px,3vw,40px)}
.fe--teaser .btn{margin-top:36px}
.tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cta{background:var(--cyan);padding-block:clamp(56px,7vw,96px)}
.cta__in{display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta h2.t{color:var(--head);margin:0}
.foot__nav{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.foot__nav a{text-decoration:none;color:#C7CEE2;font-weight:600;transition:color .3s}
.foot__nav a:hover{color:var(--cyan)}
.contact{padding-top:clamp(56px,7vw,90px)}
@media (max-width:1100px){.tiles--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tiles--4{grid-template-columns:1fr}.cta__in{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){
  .net{display:none}
  .sl img{animation:none!important}
  .sl img:first-child{opacity:1}
  .banner .bt .w>span{transform:none}
}

/* atmospheric background: graded in WebGL (see gl.js); the first photo is the no-WebGL fallback */
.sl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);opacity:0}
.sl img:first-child{opacity:1}
.sl.gl-on img{visibility:hidden}
.sl canvas.gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.net{display:none}

/* reading progress line under the header (progressive enhancement) */
@supports (animation-timeline:scroll()){
  .top::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--cyan);transform-origin:left center;transform:scaleX(0);animation:prog linear both;animation-timeline:scroll(root)}
  [dir=rtl] .top::after{transform-origin:right center}
  @keyframes prog{to{transform:scaleX(1)}}
}

/* facts strip with count-up numbers (all values come from the firm's own copy) */
.facts{background:var(--navy);color:var(--white);padding-block:clamp(40px,5vw,72px)}
.facts__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.fact-i{padding:8px clamp(14px,2.4vw,36px);border-inline-start:1px solid rgba(183,200,235,.2)}
.fact-i:first-child{border-inline-start:0;padding-inline-start:0}
.fact-i b{display:block;font:900 clamp(40px,5.4vw,76px)/1.1 var(--lat);color:var(--cyan);font-variant-numeric:tabular-nums}
.fact-i span{display:block;margin-top:8px;color:#C7CEE2;font-size:16px;line-height:1.6}

/* drawn line icons */
.ico{width:100%;height:auto;overflow:visible}
.ico *{fill:none;stroke:var(--cyan);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.js .ico .d{stroke-dasharray:var(--l,1);stroke-dashoffset:var(--l,1)}
.ico .f{fill:rgba(68,108,207,0);transition:fill 1s 1.7s ease}
.draw.in .ico .f{fill:rgba(68,108,207,.14)}
.draw.in .ico .d{animation:dr 1.5s var(--ease) forwards;animation-delay:calc(var(--i,0)*.14s)}
@keyframes dr{to{stroke-dashoffset:0}}
.js .draw.in .ico .d{stroke-dasharray:var(--l,1)}

/* gavel: drawn in the raised pose, then it comes down once, the block answers, and it rests as an icon */
.gavel-band{background:var(--navy-2);color:var(--white);position:relative;overflow:hidden}
.gavel-band__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,6vw,100px);align-items:center}
.gavel-band h2.t{color:var(--white);margin:0;font-size:clamp(26px,3.4vw,44px)}
html:is([lang=en],[lang=tr],[lang=zh]) .gavel-band h2.t{font-size:clamp(20px,2.4vw,30px)}
.gavel{max-width:440px;margin-inline:auto;width:100%}
.gavel .ico{filter:drop-shadow(0 0 24px rgba(68,108,207,.12))}
.gv{transform-box:view-box;transform-origin:47.5px 240.5px;transform:rotate(-34deg)}
.draw.in .gv{animation:strike 1.5s 1.7s forwards}
@keyframes strike{
  0%{transform:rotate(-34deg);animation-timing-function:ease-out}
  10%{transform:rotate(-38deg);animation-timing-function:cubic-bezier(.7,0,1,.55)}
  44%{transform:rotate(1.6deg);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  60%{transform:rotate(-5deg);animation-timing-function:ease-in-out}
  74%{transform:rotate(.7deg);animation-timing-function:ease-in-out}
  87%{transform:rotate(-1.2deg);animation-timing-function:ease-in-out}
  100%{transform:rotate(0)}
}
.blk{transform-box:view-box}
.draw.in .blk{animation:blk .5s 2.36s ease-out}
@keyframes blk{0%{transform:translateY(0)}30%{transform:translateY(3px)}100%{transform:translateY(0)}}
.ring{transform-box:fill-box;transform-origin:center;opacity:0;stroke-width:1.8}
.draw.in .ring{animation:ring 1.3s 2.36s ease-out forwards}
.draw.in .ring.r2{animation-delay:2.5s}
.draw.in .ring.r3{animation-delay:2.66s}
@keyframes ring{0%{opacity:.95;transform:scale(.15)}100%{opacity:0;transform:scale(1.35)}}
.flash{fill:rgba(68,108,207,.55)!important;stroke:none!important;transform-box:fill-box;transform-origin:center;opacity:0}
.draw.in .flash{animation:flash .7s 2.36s ease-out}
@keyframes flash{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.2)}}

/* clock: a bezel that draws, a face that lights, ticks that appear around the dial, hands that sweep in then keep real time */
.clock{width:min(210px,44vw);flex:none;filter:drop-shadow(0 0 26px rgba(68,108,207,.28))}
.clock .face{fill:url(#cf);stroke:none;opacity:0;transition:opacity 1.4s .5s}
.draw.in .clock .face{opacity:1}
.clock .bz{stroke:url(#cb);stroke-width:2.6}
.clock .bz2{stroke:rgba(183,200,235,.35);stroke-width:1}
.clock .tk{stroke:rgba(183,200,235,.5);stroke-width:1;opacity:0;transition:opacity .5s calc(.9s + var(--n)*.018s)}
.clock .tk.mj{stroke:#cfdbff;stroke-width:2.2}
.draw.in .clock .tk{opacity:1}
.clock .nm{fill:#cfdbff;font:600 12px/1 var(--lat);text-anchor:middle;stroke:none;opacity:0;transition:opacity .7s calc(1.5s + var(--n)*.06s)}
.draw.in .clock .nm{opacity:.85}
.clock .hnd{transform-box:view-box;transform-origin:120px 120px;opacity:0;transition:opacity .6s 2s}
.draw.in .clock .hnd{opacity:1}
.clock .hnd path{stroke:#e9eeff;stroke-width:4.4;stroke-linecap:round}
.clock #hM path{stroke-width:3}
.clock .hnd .w{stroke:none}
.clock .hnd .sc{stroke:#446CCF;stroke-width:1.5}
.clock .sd{fill:#446CCF;stroke:none}
.clock .cap{fill:#e9eeff;stroke:none}.clock .cap2{fill:#446CCF;stroke:none}
.clock .sheen{pointer-events:none}
.em .clock{width:112px}
.em{margin-top:36px;padding:22px 26px;background:var(--steel);display:flex;gap:20px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.em b{font:800 20px/1.5 var(--ar)}
html:is([lang=en],[lang=tr],[lang=zh]) .em b{font-family:var(--lat);font-size:15px;letter-spacing:.08em;text-transform:uppercase}
footer{background:#02030A;color:#9FA7BF;text-align:center;padding:36px var(--pad);font-size:14px;line-height:1.7}

/* reveals (progressive: content visible without JS) */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}

@media (max-width:1100px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile{aspect-ratio:4/3}
}
@media (max-width:900px){
  :root{--hdr:64px}
  .burger{display:block}
  .tabs{position:fixed;inset:var(--hdr) 0 auto 0;background:var(--navy);flex-direction:column;gap:0;padding:8px var(--pad) 24px;transform:translateY(-130%);transition:transform .5s var(--ease);z-index:-1;color:var(--white)}
  .tabs.open{transform:none}
  .tabs a{justify-content:flex-start;padding:20px 0;border-bottom:1px solid rgba(183,200,235,.15);opacity:1;font-size:18px}
  .tabs a::before,.tabs__bar{display:none}
  .top{justify-content:space-between}
  .top__in{gap:12px}
  .langw{margin-inline-start:auto}
  .burger{margin-inline-start:0}
  .hero__in{grid-template-columns:1fr}
  .conn{display:none}
  .about,.tl__grid,.faq__grid,.contact__grid{grid-template-columns:1fr}
  .tl__head{position:static}
  .about__img{aspect-ratio:16/10;order:-1}
  .slide{grid-template-columns:1fr}
  .slide img{min-height:220px;max-height:260px}
  dl.det{grid-template-columns:1fr}
  dl.det dt{padding-bottom:0;border-bottom:0}
  dl.det dd{border-top:0;padding-top:4px}
}
@media (max-width:560px){
  .tiles{grid-template-columns:1fr}
  .tile{aspect-ratio:16/10}
  .btn{width:100%}
  .hero .btn{width:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .hero h1 .w>span{transform:none}
  .hero p,.hero .btn{opacity:1;transform:none}
  .conn path{stroke-dashoffset:0}.conn circle{opacity:1;transform:none}
  .step{opacity:1}
}

/* ---------- multi-page additions ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.25s ease both vt-out}
::view-transition-new(root){animation:.5s .05s ease both vt-in}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* background motion: looping video + drifting network */
.net{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.9}
.hero__bg,.banner__bg,.fe__bg{overflow:hidden}

/* inner page title banner */
.banner{min-height:62vh;padding-top:var(--hdr)}
.banner .bt{font-size:clamp(46px,8.4vw,120px);font-weight:900;line-height:1.18;color:var(--white)}
html:is([lang=en],[lang=tr],[lang=zh]) .banner .bt{font-size:clamp(36px,6.4vw,92px);letter-spacing:.16em}
.banner .bt .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.banner .bt .w>span{display:inline-block;transform:translateY(105%)}
.banner .bt .c{color:var(--cyan)}
.is-ready .banner .bt .w>span{transform:none;transition:transform 1s var(--ease)}
.is-ready .banner .bt .w:nth-child(2)>span{transition-delay:.14s}

.more{display:inline-flex;align-items:center;gap:12px;margin-top:32px;font:700 17px/1 var(--arb);color:var(--steel);text-decoration:none;padding-bottom:6px;border-bottom:2px solid var(--cyan);transition:color .3s,gap .3s var(--ease)}
html:is([lang=en],[lang=tr],[lang=zh]) .more{font-family:var(--lat);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.more:hover{color:var(--head);gap:18px}
.fe--teaser .wrap{padding-block:clamp(10px,3vw,40px)}
.fe--teaser .btn{margin-top:36px}
.tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cta{background:var(--cyan);padding-block:clamp(56px,7vw,96px)}
.cta__in{display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta h2.t{color:var(--head);margin:0}
.foot__nav{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.foot__nav a{text-decoration:none;color:#C7CEE2;font-weight:600;transition:color .3s}
.foot__nav a:hover{color:var(--cyan)}
.contact{padding-top:clamp(56px,7vw,90px)}
@media (max-width:1100px){.tiles--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tiles--4{grid-template-columns:1fr}.cta__in{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){
  .net{display:none}
  .sl img{animation:none!important}
  .sl img:first-child{opacity:1}
  .banner .bt .w>span{transform:none}
}

/* atmospheric background: graded in WebGL (see gl.js); the first photo is the no-WebGL fallback */
.sl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);opacity:0}
.sl img:first-child{opacity:1}
.sl.gl-on img{visibility:hidden}
.sl canvas.gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.net{display:none}

/* reading progress line under the header (progressive enhancement) */
@supports (animation-timeline:scroll()){
  .top::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--cyan);transform-origin:left center;transform:scaleX(0);animation:prog linear both;animation-timeline:scroll(root)}
  [dir=rtl] .top::after{transform-origin:right center}
  @keyframes prog{to{transform:scaleX(1)}}
}

/* facts strip with count-up numbers (all values come from the firm's own copy) */
.facts{background:var(--navy);color:var(--white);padding-block:clamp(40px,5vw,72px)}
.facts__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.fact-i{padding:8px clamp(14px,2.4vw,36px);border-inline-start:1px solid rgba(183,200,235,.2)}
.fact-i:first-child{border-inline-start:0;padding-inline-start:0}
.fact-i b{display:block;font:900 clamp(40px,5.4vw,76px)/1.1 var(--lat);color:var(--cyan);font-variant-numeric:tabular-nums}
.fact-i span{display:block;margin-top:8px;color:#C7CEE2;font-size:16px;line-height:1.6}

/* drawn line icons */
.ico{width:100%;height:auto;overflow:visible}
.ico *{fill:none;stroke:var(--cyan);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.js .ico .d{stroke-dasharray:var(--l,1);stroke-dashoffset:var(--l,1)}
.ico .f{fill:rgba(68,108,207,0);transition:fill 1s 1.7s ease}
.draw.in .ico .f{fill:rgba(68,108,207,.14)}
.draw.in .ico .d{animation:dr 1.5s var(--ease) forwards;animation-delay:calc(var(--i,0)*.14s)}
@keyframes dr{to{stroke-dashoffset:0}}
.js .draw.in .ico .d{stroke-dasharray:var(--l,1)}

/* gavel: drawn in the raised pose, then it comes down once, the block answers, and it rests as an icon */
.gavel-band{background:var(--navy-2);color:var(--white);position:relative;overflow:hidden}
.gavel-band__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,6vw,100px);align-items:center}
.gavel-band h2.t{color:var(--white);margin:0;font-size:clamp(26px,3.4vw,44px)}
html:is([lang=en],[lang=tr],[lang=zh]) .gavel-band h2.t{font-size:clamp(20px,2.4vw,30px)}
.gavel{max-width:440px;margin-inline:auto;width:100%}
.gavel .ico{filter:drop-shadow(0 0 24px rgba(68,108,207,.12))}
.gv{transform-box:view-box;transform-origin:47.5px 240.5px;transform:rotate(-34deg)}
.draw.in .gv{animation:strike 1.5s 1.7s forwards}
@keyframes strike{
  0%{transform:rotate(-34deg);animation-timing-function:ease-out}
  10%{transform:rotate(-38deg);animation-timing-function:cubic-bezier(.7,0,1,.55)}
  44%{transform:rotate(1.6deg);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  60%{transform:rotate(-5deg);animation-timing-function:ease-in-out}
  74%{transform:rotate(.7deg);animation-timing-function:ease-in-out}
  87%{transform:rotate(-1.2deg);animation-timing-function:ease-in-out}
  100%{transform:rotate(0)}
}
.blk{transform-box:view-box}
.draw.in .blk{animation:blk .5s 2.36s ease-out}
@keyframes blk{0%{transform:translateY(0)}30%{transform:translateY(3px)}100%{transform:translateY(0)}}
.ring{transform-box:fill-box;transform-origin:center;opacity:0;stroke-width:1.8}
.draw.in .ring{animation:ring 1.3s 2.36s ease-out forwards}
.draw.in .ring.r2{animation-delay:2.5s}
.draw.in .ring.r3{animation-delay:2.66s}
@keyframes ring{0%{opacity:.95;transform:scale(.15)}100%{opacity:0;transform:scale(1.35)}}
.flash{fill:rgba(68,108,207,.55)!important;stroke:none!important;transform-box:fill-box;transform-origin:center;opacity:0}
.draw.in .flash{animation:flash .7s 2.36s ease-out}
@keyframes flash{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.2)}}

/* clock: draws, then the hands keep telling time (24 hours a day) */
.clock{width:min(190px,40vw);flex:none}


.em{margin-top:36px;padding:26px clamp(20px,3vw,34px);background:transparent;display:flex;gap:clamp(18px,3vw,36px);align-items:center;flex-wrap:wrap}
.em .clock{width:96px}
.em__t{flex:1;min-width:200px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
@media (max-width:900px){.facts__row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}.fact-i:nth-child(3){border-inline-start:0;padding-inline-start:0}.gavel-band__in{grid-template-columns:1fr}.gavel{max-width:280px}}
@media (prefers-reduced-motion:reduce){
  .js .ico .d{stroke-dasharray:none;stroke-dashoffset:0}.ico .f{fill:rgba(68,108,207,.16)}
  .gv{transform:none}.ring,.flash{display:none}
}

.fact-i b{unicode-bidi:isolate}
[dir=rtl] .fact-i b{text-align:right}

/* image reveal: a clip-path wipe with a slow settle, like editorial sites */
.js .clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.5s var(--ease)}
.js .clip img{transform:scale(1.25);transition:transform 2s var(--ease)}
.js .clip.in{clip-path:inset(0)}
.js .clip.in img{transform:none}
@media (prefers-reduced-motion:reduce){.js .clip{clip-path:none}.js .clip img{transform:none}}

/* home hero: a glowing constellation on deep navy */
.hero{background:radial-gradient(ellipse 80% 70% at 32% 42%,#0d1b52 0%,#070f30 48%,#03050E 100%)}
.hero__bg canvas.constel{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero::before{background:radial-gradient(ellipse 60% 55% at 70% 50%,rgba(3,5,14,.5),transparent 70%)!important}
[dir=ltr] .hero::before{background:radial-gradient(ellipse 60% 55% at 30% 50%,rgba(3,5,14,.5),transparent 70%)!important}

/* section titles: a short cyan bar underneath, as on the reference */
.sec h2.t::after{content:"";display:block;width:46px;height:4px;background:var(--cyan);margin-top:18px}
.tl__head h2.t::after,.cta h2.t::after,.gavel-band h2.t::after{display:none}
.tl__head h2.t::after{display:block;margin-inline:auto}

/* workflow on a dark aerial photo: centred line, steps alternating either side */
.tl{position:relative;overflow:hidden;background:var(--navy);color:var(--white);isolation:isolate}
.tl__bg{position:absolute;inset:-6% 0;z-index:-2}
.tl::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,5,14,.9),rgba(3,5,14,.72) 40%,rgba(3,5,14,.9))}
.tl__grid{display:block}
.tl__head{position:static;text-align:center;max-width:46em;margin:0 auto clamp(48px,6vw,90px)}
.tl__head .clock{width:clamp(110px,12vw,150px);margin:0 auto 28px;display:block}
.tl__head h2.t{color:var(--white)}
.tl__head .lead{color:#C7CEE2;margin-inline:auto}
.tl .line{display:block;position:relative;padding:0}
.tl .line::before{inset-block:6px;inset-inline-start:auto;left:50%;transform:translateX(-50%);background:rgba(183,200,235,.22)}
.tl .line__fill{inset-inline-start:auto;left:50%;transform:translateX(-50%)}
.tl .step{width:50%;padding:0 clamp(28px,4vw,56px) clamp(36px,5vw,64px);position:relative}
.tl .step:nth-of-type(even){margin-inline-start:50%}
.tl .step:nth-of-type(odd){text-align:end}
.tl .step::before{top:8px;background:var(--navy);border-color:rgba(183,200,235,.4)}
.tl .step:nth-of-type(odd)::before{inset-inline-start:auto;inset-inline-end:-12px}
.tl .step:nth-of-type(even)::before{inset-inline-start:-12px}
.tl .step.on::before{background:var(--cyan);border-color:var(--cyan)}
.tl .step h3{color:var(--white)}
.tl .step p{color:#C7CEE2;max-width:none}
.tl .step:nth-of-type(odd) p{margin-inline-start:auto}
@media (max-width:900px){
  .tl .line::before,.tl .line__fill{left:11px;transform:none}
  [dir=rtl] .tl .line::before,[dir=rtl] .tl .line__fill{left:auto;right:11px}
  .tl .step,.tl .step:nth-of-type(even){width:100%;margin-inline-start:0;padding-inline:56px 0;text-align:start}
  .tl .step:nth-of-type(odd){text-align:start}
  .tl .step::before,.tl .step:nth-of-type(odd)::before,.tl .step:nth-of-type(even)::before{inset-inline-start:0;inset-inline-end:auto}
}

/* hero: graded buildings underneath, the rendered network on top (screen blend keeps only the light) */
.hero__bg .sl{position:absolute;inset:0}
.hero__bg video.netv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;opacity:.95}
.hero{background:#03050E}
.hero::before{background:linear-gradient(265deg,rgba(3,5,14,.55) 0%,rgba(3,5,14,.2) 55%,rgba(3,5,14,.05) 100%)!important}
[dir=ltr] .hero::before{background:linear-gradient(95deg,rgba(3,5,14,.55) 0%,rgba(3,5,14,.2) 55%,rgba(3,5,14,.05) 100%)!important}
.hero__bg canvas.constel{display:none}
@media (prefers-reduced-motion:reduce){.hero__bg video.netv{display:none}}

/* numbers: light, large, centred, with a drawn rule under each (as on the reference) */
.facts{padding-block:clamp(64px,8vw,120px);background:linear-gradient(180deg,#050818,#03050E)}
.facts__row{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3vw,48px);text-align:center}
.fact-i{border:0!important;padding:0!important;display:flex;flex-direction:column;align-items:center}
.fact-i b{font:300 clamp(54px,7vw,104px)/1 var(--lat);letter-spacing:.02em;color:var(--cyan);text-align:center!important}
.fact-i span{margin-top:18px;font:600 15px/1.6 var(--arb);color:#E3E7F4}
html:is([lang=en],[lang=tr],[lang=zh]) .fact-i span{font-family:var(--lat);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase}
.fact-i i{display:block;width:100%;max-width:190px;height:1px;margin-top:26px;background:var(--cyan);transform:scaleX(0);transform-origin:center;transition:transform 1.3s .5s var(--ease)}
.js .fact-i.in i{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.fact-i i{transform:none}}
@media (max-width:900px){.facts__row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}}

.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;z-index:-1;background:linear-gradient(180deg,rgba(3,5,14,0),rgba(3,5,14,.82));pointer-events:none}

/* "how we think": statements light up word by word as you scroll */
.persp{background:var(--navy);color:var(--white)}
.persp h2.t{color:var(--white);margin-bottom:clamp(36px,5vw,72px)}
.statement{font:800 clamp(26px,3.6vw,54px)/1.55 var(--ar);max-width:22em;margin:0 0 clamp(34px,5vw,72px);text-wrap:balance}
html:is([lang=en],[lang=tr],[lang=zh]) .statement{font-family:var(--lat);font-weight:700;font-size:clamp(22px,2.8vw,40px);letter-spacing:.02em;line-height:1.5;text-transform:none}
.statement .wd{display:inline-block;white-space:pre}
.tracks{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px);max-width:60em}
.tracks li{padding:18px 0;border-top:1px solid rgba(183,200,235,.25);font:700 clamp(17px,1.5vw,20px)/1.6 var(--arb)}
html:is([lang=en],[lang=tr],[lang=zh]) .tracks li{font-family:var(--lat);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:700px){.tracks{grid-template-columns:1fr}}

/* hero: the lances. Message on one side, the firm's name drawn in light on the other */
.hero canvas.lances{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero .hero__in{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:center}
.hero__word{min-height:clamp(220px,31vw,460px)}
.hero h1{font-size:clamp(30px,4.4vw,68px)}
html:is([lang=en],[lang=tr],[lang=zh]) .hero h1{font-size:clamp(26px,3.6vw,56px)}
.hero p{max-width:26em}
.hero::before{background:linear-gradient(265deg,rgba(3,5,14,.5) 0%,rgba(3,5,14,.15) 60%,rgba(3,5,14,.05) 100%)!important}
[dir=ltr] .hero::before{background:linear-gradient(95deg,rgba(3,5,14,.5) 0%,rgba(3,5,14,.15) 60%,rgba(3,5,14,.05) 100%)!important}
@media (max-width:900px){
  .hero .hero__in{grid-template-columns:1fr;gap:8px;padding-top:calc(var(--hdr) + 8px)}
  .hero__word{order:-1;min-height:min(46vw,200px)}
}

/* clock: richer finish */
.clock{width:min(250px,56vw)}
.clock .face{filter:drop-shadow(0 0 0 transparent)}
.clock .bz{stroke-width:4.2}
.clock .bz2{stroke:rgba(207,219,255,.55);stroke-width:1.4}
.clock .tk{stroke:rgba(183,200,235,.7);stroke-width:1.3}
.clock .tk.mj{stroke:#fff;stroke-width:3}
.clock .nm{font:700 14px/1 var(--lat);fill:#fff;opacity:0}
.draw.in .clock .nm{opacity:1}
.clock .hnd path{stroke-width:7;filter:drop-shadow(0 0 5px rgba(120,152,245,.7))}
.clock #hM path{stroke-width:4.6}
.clock .hnd .sc{stroke-width:2;filter:drop-shadow(0 0 4px rgba(68,108,207,.9))}
.clock .cap{r:8}
.em .clock{width:124px}

/* emergency block: no solid box, it sits in the page like a line of the layout */
.em{background:transparent;padding:30px 0 0;border-top:1px solid rgba(183,200,235,.28);gap:clamp(20px,3vw,40px)}
.em .clock{width:132px;filter:drop-shadow(0 0 22px rgba(68,108,207,.2))}
.em .clock .face{opacity:.85}
.em .btn{background:transparent;color:var(--white);border:1px solid var(--cyan);min-height:48px}
.em .btn:hover{background:var(--cyan);color:#fff}

/* hero: logo only, centred */
.hero .hero__in{grid-template-columns:1fr;justify-items:center;text-align:center}
.hero__logo img{width:clamp(240px,34vw,520px);height:auto;margin-inline:auto;opacity:0;transform:translateY(16px)}
.is-ready .hero__logo img{opacity:1;transform:none;transition:opacity 1s .2s,transform 1s .2s var(--ease)}
@media (prefers-reduced-motion:reduce){.hero__logo img{opacity:1;transform:none}}
.hero .hero__word{display:none}

/* hero: calm cinematic. Slow drift on the photos, accent rule under the logo, scroll cue */
.hero__logo{display:flex;flex-direction:column;align-items:center}
.hero__rule{display:block;width:0;height:2px;margin-top:clamp(22px,3vw,40px);background:var(--cyan)}
.is-ready .hero__rule{width:clamp(56px,7vw,96px);transition:width 1.2s .7s var(--ease)}
.hero__bg .sl{animation:heroDrift 28s ease-in-out infinite alternate;will-change:transform}
@keyframes heroDrift{from{transform:scale(1)}to{transform:scale(1.06)}}
.hero__scroll{position:absolute;bottom:32px;inset-inline-start:50%;width:28px;height:48px;margin-inline-start:-14px;border:1.5px solid rgba(255,255,255,.55);border-radius:14px;display:block;opacity:0}
.is-ready .hero__scroll{opacity:1;transition:opacity 1s 1.2s}
.hero__scroll i{position:absolute;left:50%;top:9px;width:3px;height:9px;margin-left:-1.5px;border-radius:2px;background:var(--cyan);animation:heroCue 2.2s ease-in-out infinite}
@keyframes heroCue{0%{transform:translateY(0);opacity:0}25%{opacity:1}75%{transform:translateY(16px);opacity:1}100%{transform:translateY(20px);opacity:0}}
.hero__scroll:focus-visible{outline-offset:6px}
@media (prefers-reduced-motion:reduce){.hero__bg .sl{animation:none}.hero__scroll i{animation:none;opacity:1}.hero__rule{width:72px}.hero__scroll{opacity:1}}

/* numbers strip: light, matches the page */
.facts{background:var(--mist);color:var(--ink);border-block:1px solid rgba(31,44,86,.1)}
.fact-i{border-inline-start-color:rgba(31,44,86,.16)}
.fact-i span{color:var(--ink)}

/* hero: the Ishtar Gate at night. Logo and line in the sky, actions on the wet courtyard */
.hero__bg picture,.hero__bg img{display:block;width:100%;height:100%}
.hero__bg img{object-fit:cover;object-position:50% 62%}
.hero::before{background:linear-gradient(180deg,rgba(3,5,14,.55) 0%,rgba(3,5,14,0) 34%,rgba(3,5,14,0) 72%,rgba(3,5,14,.5) 100%)!important}
[dir=ltr] .hero::before{background:linear-gradient(180deg,rgba(3,5,14,.55) 0%,rgba(3,5,14,0) 34%,rgba(3,5,14,0) 72%,rgba(3,5,14,.5) 100%)!important}
.hero::after{height:22%;background:linear-gradient(180deg,rgba(3,5,14,0),rgba(3,5,14,.7))}
.hero .hero__in{width:100%;min-height:100dvh;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding-block:calc(var(--hdr) + clamp(16px,3vh,36px)) clamp(36px,8vh,88px)}
.hero__top{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero .hero__logo{margin:0}
.hero__logo img{width:clamp(210px,24vw,380px)}
.hero__top p{margin:clamp(10px,1.6vh,18px) 0 0;max-width:none;font:600 clamp(16px,1.5vw,21px)/1.6 var(--arb);color:#DCE5F8;text-shadow:0 1px 18px rgba(3,5,14,.9)}
html:is([lang=en],[lang=tr],[lang=zh]) .hero__top p{font-family:var(--lat);letter-spacing:.04em}
.hero__act{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.btn--ghost{background:rgba(3,5,14,.38);color:var(--white);box-shadow:inset 0 0 0 1px rgba(183,200,235,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:var(--white);color:var(--navy)}
.hero .btn:focus-visible{outline:2px solid var(--ice);outline-offset:4px}
@media (max-width:700px){
  .hero .hero__in{padding-block:calc(var(--hdr) + 12px) 40px}
  .hero__logo img{width:min(72vw,300px)}
  .hero__act{width:100%;flex-direction:column;align-items:stretch;max-width:320px}
  .hero .btn{width:100%}
  .hero__bg img{object-position:50% 70%}
}

/* buttons: on hover the fill turns white, so the label must turn dark (it was white on white) */
.btn:where(:not(.btn--dark)):hover{color:var(--navy)}

/* the watch: a full section. Navy dial and steel case after the reference, both hands are lances */
.watch-sec{background:linear-gradient(180deg,#E9EEFA,var(--mist));overflow:hidden}
.watch-sec__in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
.watch-sec__t .lead{margin-bottom:34px}
.watch-sec__w{justify-self:center;width:min(100%,400px)}
.watch{display:block;width:100%;height:auto;filter:drop-shadow(0 34px 38px rgba(10,15,38,.3))}
.watch .sti{stroke:rgba(231,238,255,.7);stroke-width:1.2;stroke-dasharray:4 3.4;fill:none}
.watch .cr{stroke:rgba(10,15,38,.45);stroke-width:1;fill:none}
.watch .mt{stroke:rgba(183,200,235,.65);stroke-width:1}
.watch .bt{fill:url(#wBat);stroke:rgba(10,15,38,.5);stroke-width:.5}
.watch .wl{font:800 9.5px/1 var(--lat);letter-spacing:.18em;fill:#EDF1FF;text-anchor:middle}
.watch .ws{font:600 5.6px/1 var(--lat);letter-spacing:.3em;fill:#B7C8EB;text-anchor:middle}
.watch .wd{font:700 11.5px/1 var(--lat);fill:#0A0F26}
.watch .hnd{transform-box:view-box;transform-origin:126px 180px;opacity:0;transition:opacity .7s .9s;filter:drop-shadow(0 3px 2px rgba(3,5,14,.4))}
.draw.in .watch .hnd{opacity:1}
.watch .hnd>g>path:not(.lume):not(.sc){fill:url(#wHand);stroke:rgba(10,15,38,.55);stroke-width:.6;stroke-linejoin:round}
.watch .lume{fill:none;stroke:#446CCF;stroke-width:1.7;stroke-linecap:round}
.watch .sc{fill:none;stroke:#B7C8EB;stroke-width:1.1}
.watch .sd{fill:#B7C8EB}
@media (max-width:900px){
  .watch-sec__in{grid-template-columns:1fr;justify-items:center;text-align:center}
  .watch-sec__w{order:-1;width:min(64vw,280px)}
  .watch-sec__t .lead{margin-inline:auto}
  .watch-sec h2.t::after{margin-inline:auto}
}
/* contact: the small clock's hands are lances too */
.clock #hH path.lance,.clock #hM path.lance{fill:#e9eeff;stroke:#e9eeff;stroke-width:.8;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(120,152,245,.6))}
.watch text{direction:ltr;unicode-bidi:isolate}

/* watch, luxury pass: dark stage, layered case / sunburst dial / glass, light that follows the pointer */
.watch-sec{position:relative;isolation:isolate;background:radial-gradient(ellipse 60% 70% at 30% 50%,#101c4a 0%,#070d28 55%,#03050E 100%)}
.watch-sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 28% 46% at 30% 48%,rgba(110,150,255,.2),transparent 70%)}
.watch-sec h2.t{color:var(--white)}
.watch-sec .lead{color:#C7CEE2}
.watch-sec__w{width:min(100%,430px)}
.wx{position:relative;aspect-ratio:252/360;transform-style:preserve-3d;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
.wx .watch{position:absolute;inset:0;width:100%;height:100%;filter:none}
.wx>i{position:absolute;display:block;pointer-events:none}
.wshadow{left:12%;right:12%;bottom:-2%;height:9%;border-radius:50%;background:rgba(0,0,0,.65);filter:blur(22px);transform:translateZ(-30px)}
.watch--back{transform:translateZ(0)}
.wcase{left:50%;top:50%;width:93.65%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) translateZ(8px);
  background:conic-gradient(from 210deg,#f4f7ff,#8e9ab8 12%,#eef2fb 24%,#5f6b8b 38%,#dfe6f7 52%,#8793b0 66%,#f6f8ff 80%,#7a86a6 92%,#f4f7ff);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,0,0,.28),0 18px 30px rgba(0,0,0,.45)}
.wdial{left:50%;top:50%;width:85.3%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) translateZ(12px);overflow:hidden;
  background:radial-gradient(circle at 50% 34%,#3157bf 0%,#1b327f 52%,#0A0F26 100%);
  box-shadow:inset 0 0 0 2.5px #060a1d,inset 0 8px 22px rgba(0,0,0,.5)}
.wsun{position:absolute;inset:0;border-radius:50%;
  background:
    conic-gradient(from var(--sun,24deg),rgba(255,255,255,0) 0,rgba(255,255,255,.26) 7%,rgba(255,255,255,0) 19%,rgba(255,255,255,0) 50%,rgba(255,255,255,.18) 57%,rgba(255,255,255,0) 69%),
    repeating-conic-gradient(rgba(255,255,255,.06) 0 .55deg,rgba(255,255,255,0) .55deg 1.7deg),
    repeating-radial-gradient(circle,rgba(255,255,255,.035) 0 1px,rgba(255,255,255,0) 1px 3px)}
.watch--front{transform:translateZ(16px)}
.wglass{left:50%;top:50%;width:85.3%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) translateZ(22px);
  background:linear-gradient(var(--ga,125deg),rgba(255,255,255,.2) 0,rgba(255,255,255,.04) 34%,rgba(255,255,255,0) 46%),radial-gradient(circle at 70% 82%,rgba(160,190,255,.12),transparent 40%)}
.wx .bt{filter:drop-shadow(0 0 1.6px rgba(183,200,235,.8))}
.wx .lume{filter:drop-shadow(0 0 3px rgba(68,108,207,.95))}
.wx .hnd{filter:drop-shadow(2px 5px 3px rgba(0,0,0,.45))}
@media (max-width:900px){.watch-sec__w{width:min(66vw,290px)}}
@media (prefers-reduced-motion:reduce){.wx{transform:none}}
/* straps: grain, tight stitching, and they dissolve into the dark instead of ending on a hard edge */
.wx .sti{stroke:#dbe5ff;stroke-opacity:.8;stroke-width:1.1;stroke-dasharray:3.2 2.4;stroke-linecap:round;fill:none}
.wx .stis{stroke:#000;stroke-opacity:.5;stroke-width:1.1;stroke-dasharray:3.2 2.4;stroke-linecap:round;fill:none}
.watch--back{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%)}

/* news + activities pages */
.news .lead,.acts .lead{margin-bottom:clamp(36px,5vw,64px)}
.meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 10px;font:600 14px/1.4 var(--lat);letter-spacing:.04em;color:var(--ink)}
.smp{padding:5px 10px;border:1px solid var(--cyan);color:var(--cyan);font:700 12px/1 var(--arb);letter-spacing:0}
html:is([lang=en],[lang=tr],[lang=zh]) .smp{font-family:var(--lat)}
.nfeat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center;margin-bottom:clamp(52px,7vw,104px)}
.nfeat img,.ncard img,.act img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.nfeat h2{margin:0 0 16px;font:800 clamp(26px,3vw,40px)/1.45 var(--ar);color:var(--head)}
.nfeat p:not(.meta){margin:0;max-width:30em;font-size:clamp(17px,1.4vw,19px);color:#2c324a}
.ngrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(20px,2.5vw,36px)}
.ncard img{margin-bottom:18px}
.ncard h3,.act h3{margin:0 0 8px;font:700 clamp(18px,1.5vw,21px)/1.55 var(--ar);color:var(--head)}
.ncard p:not(.meta),.act__t p:not(.meta){margin:0;font-size:16px;color:#2c324a}
html:is([lang=en],[lang=tr],[lang=zh]) .nfeat h2,html:is([lang=en],[lang=tr],[lang=zh]) .ncard h3,html:is([lang=en],[lang=tr],[lang=zh]) .act h3{font-family:var(--lat)}
.alist{border-bottom:1px solid rgba(31,44,86,.14)}
.act{display:grid;grid-template-columns:110px minmax(0,320px) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center;padding-block:clamp(24px,3vw,40px);border-top:1px solid rgba(31,44,86,.14)}
.act__d{display:flex;flex-direction:column;align-items:flex-start}
.act__d b{font:300 clamp(48px,5vw,72px)/1 var(--lat);color:var(--cyan)}
.act__d span{margin-top:6px;font:600 14px/1.4 var(--lat);letter-spacing:.04em;color:var(--ink)}
@media (max-width:900px){
  .nfeat{grid-template-columns:1fr}
  .ngrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .act{grid-template-columns:minmax(0,260px) minmax(0,1fr)}
  .act__d{grid-column:1/-1;flex-direction:row;align-items:baseline;gap:12px}
  .act__d b{font-size:44px}
}
@media (max-width:600px){
  .ngrid{grid-template-columns:1fr}
  .act{grid-template-columns:1fr}
}

/* nav: Services opens the three main categories */
.tabs .has-sub{position:relative;display:flex}
.tabs .has-sub>a::after{content:"";width:6px;height:6px;margin-inline-start:9px;margin-top:-3px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);opacity:.7}
.tabs .sub{position:absolute;top:100%;left:50%;min-width:270px;margin:0;padding:8px 0;list-style:none;background:var(--navy-2);border:1px solid rgba(183,200,235,.18);border-top:2px solid var(--cyan);opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .25s,transform .3s var(--ease),visibility .25s}
.tabs .has-sub:hover>.sub,.tabs .has-sub:focus-within>.sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.tabs .sub a{display:block;padding:14px 22px;opacity:1;color:#E9EEFF;font:600 15px/1.4 var(--arb);text-align:start}
.tabs .sub a::before{display:none}
.tabs .sub a:hover,.tabs .sub a:focus-visible{background:rgba(68,108,207,.24)}
html:is([lang=en],[lang=tr],[lang=zh]) .tabs .sub a{font-family:var(--lat);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:900px){
  .tabs .has-sub{display:block}
  .tabs .has-sub>a::after{display:none}
  .tabs .sub{position:static;min-width:0;padding:0 0 10px;background:none;border:0;opacity:1;visibility:visible;transform:none}
  .tabs .sub a{padding:13px 0;padding-inline-start:20px;border-bottom:0;font-size:16px;opacity:.82}
}

/* services page: three categories, each with its own list */
.svc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:clamp(36px,5vw,64px)}
.svc-card{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.svc-card img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:filter .5s}
.svc-card:hover img{filter:brightness(1.08)}
.svc-card__n{margin-top:18px;font:600 14px/1.4 var(--arb);color:var(--ink)}
.svc-card h3{margin:6px 0 8px;font:800 clamp(20px,1.9vw,26px)/1.4 var(--ar);color:var(--head);transition:color .3s}
.svc-card:hover h3{color:var(--cyan)}
.svc-card p{margin:0 0 18px;font-size:16px;color:#2c324a}
.svc-card__go{align-self:flex-start;margin-top:auto;padding-bottom:3px;border-bottom:1px solid currentColor;font:700 15px/1.4 var(--arb);color:var(--cyan)}
.svc-card:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
html:is([lang=en],[lang=tr],[lang=zh]) .svc-card h3{font-family:var(--lat);letter-spacing:.01em}
.svc--mist{background:var(--mist)}
.svc--navy{background:var(--navy);color:var(--white)}
.svc--navy h2.t{color:var(--white)}
.svc--navy .lead{color:#D5DCEE}
.svc__in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.svc__h{position:sticky;top:calc(var(--hdr) + 40px)}
.svc__list{margin:0;border-bottom:1px solid rgba(31,44,86,.16)}
.srow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(16px,3vw,40px);padding-block:clamp(20px,2.4vw,30px);border-top:1px solid rgba(31,44,86,.16)}
.srow dt{font:800 clamp(18px,1.6vw,21px)/1.55 var(--ar);color:var(--head)}
.srow dd{margin:0;font-size:17px;color:#2c324a}
html:is([lang=en],[lang=tr],[lang=zh]) .srow dt{font-family:var(--lat);letter-spacing:.01em}
.svc--navy .svc__list{border-bottom-color:rgba(183,200,235,.22)}
.svc--navy .srow{border-top-color:rgba(183,200,235,.22)}
.svc--navy .srow dt{color:var(--white)}
.svc--navy .srow dd{color:#D5DCEE}
@media (max-width:900px){
  .svc-cards{grid-template-columns:1fr}
  .svc__in{grid-template-columns:1fr}
  .svc__h{position:static}
  .srow{grid-template-columns:1fr;gap:6px}
}

/* services page rows are links; one page per service */
.srow{grid-template-columns:minmax(0,2fr) minmax(0,3fr) auto}
.srow dt a{color:inherit;text-decoration:none;transition:color .3s}
.srow dt a:hover,.srow dt a:focus-visible{color:var(--cyan)}
.svc--navy .srow dt a:hover,.svc--navy .srow dt a:focus-visible{color:var(--ice)}
.srow__go{align-self:center;padding-bottom:3px;border-bottom:1px solid currentColor;color:var(--cyan);text-decoration:none;white-space:nowrap;font:700 15px/1.4 var(--arb)}
.svc--navy .srow__go{color:var(--ice)}
html:is([lang=en],[lang=tr],[lang=zh]) .srow__go{font-family:var(--lat);font-size:13px;letter-spacing:.06em}
@media (max-width:900px){.srow{grid-template-columns:1fr}.srow__go{justify-self:start;margin-top:6px}}
.banner--svc{min-height:48vh}
.banner--svc .bt{font-size:clamp(30px,4.6vw,62px);line-height:1.4;max-width:20em;margin-inline:auto;text-align:center}
html:is([lang=en],[lang=tr],[lang=zh]) .banner--svc .bt{font-size:clamp(26px,3.6vw,50px);letter-spacing:.08em}
.svcp__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,96px);align-items:start}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:28px;font:600 14px/1.5 var(--arb);color:var(--ink)}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--cyan)}
.crumbs a+a::before{content:"/";margin-inline-end:10px;opacity:.45}
html:is([lang=en],[lang=tr],[lang=zh]) .crumbs{font-family:var(--lat);font-size:13px;letter-spacing:.04em}
.svcp__main .lead{margin-bottom:clamp(24px,3vw,36px);font-size:clamp(19px,1.7vw,23px);font-weight:600;color:var(--head)}
.svcp__main p:not(.lead){max-width:42em;margin:0 0 22px;font-size:18px;line-height:2;color:#2c324a}
html:is([lang=en],[lang=tr],[lang=zh]) .svcp__main p:not(.lead){line-height:1.85}
.svcp__main .btn{margin-top:18px}
.svcp__side{position:sticky;top:calc(var(--hdr) + 32px);padding-top:20px;border-top:2px solid var(--cyan)}
.svcp__side h2{margin:0 0 14px;font:800 20px/1.5 var(--ar);color:var(--head)}
html:is([lang=en],[lang=tr],[lang=zh]) .svcp__side h2{font-family:var(--lat);font-size:16px}
.svcp__side ul{margin:0 0 20px;padding:0;list-style:none}
.svcp__side li{border-top:1px solid rgba(31,44,86,.14)}
.svcp__side li:last-child{border-bottom:1px solid rgba(31,44,86,.14)}
.svcp__side li a{display:block;padding:13px 0;color:#2c324a;text-decoration:none;font:600 16px/1.5 var(--arb);transition:color .3s}
.svcp__side li a:hover{color:var(--cyan)}
.svcp__side li a[aria-current=page]{color:var(--cyan);font-weight:800}
html:is([lang=en],[lang=tr],[lang=zh]) .svcp__side li a{font-family:var(--lat);font-size:14px}
.svcp__all{color:var(--cyan);font:700 15px/1.4 var(--arb);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
@media (max-width:900px){.svcp__in{grid-template-columns:1fr}.svcp__side{position:static}}

/* news + activities: items link to their own pages */
.ncard h3 a,.nfeat h2 a,.act h3 a{color:inherit;text-decoration:none;transition:color .3s}
.ncard h3 a:hover,.nfeat h2 a:hover,.act h3 a:hover,.ncard h3 a:focus-visible,.nfeat h2 a:focus-visible,.act h3 a:focus-visible{color:var(--cyan)}
.ncard .srow__go,.nfeat .srow__go,.act .srow__go{display:inline-block;margin-top:16px}
.svcp__main .meta{margin-bottom:18px}

/* home: trusted clients (sample marks), the three main services with their branches, latest news */
.clients{background:var(--mist)}
.clients .meta{margin:-6px 0 clamp(28px,4vw,48px)}
.clients__wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:1px solid rgba(31,44,86,.14);border-inline-start:1px solid rgba(31,44,86,.14)}
.clients__wall li{display:flex;align-items:center;justify-content:center;min-height:clamp(84px,9vw,116px);border-bottom:1px solid rgba(31,44,86,.14);border-inline-end:1px solid rgba(31,44,86,.14);color:#737880;transition:color .4s}
.clients__wall li:hover{color:var(--head)}
.clients__wall svg{width:clamp(34px,3.6vw,46px);height:auto}
@media (max-width:700px){.clients__wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hsvc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);margin-top:clamp(36px,5vw,64px)}
.hsvc__c{display:flex;flex-direction:column}
.hsvc__c img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.hsvc__c h3{margin:6px 0 14px;font:800 clamp(20px,1.9vw,26px)/1.4 var(--ar)}
.hsvc__c h3 a{color:var(--head);text-decoration:none;transition:color .3s}
.hsvc__c h3 a:hover,.hsvc__c h3 a:focus-visible{color:var(--cyan)}
html:is([lang=en],[lang=tr],[lang=zh]) .hsvc__c h3{font-family:var(--lat);letter-spacing:.01em}
.hsvc__c ul{margin:0 0 20px;padding:0;list-style:none}
.hsvc__c li{border-top:1px solid rgba(31,44,86,.14)}
.hsvc__c li:last-child{border-bottom:1px solid rgba(31,44,86,.14)}
.hsvc__c li a{display:block;padding:12px 0;color:#2c324a;text-decoration:none;font:600 16px/1.5 var(--arb);transition:color .3s}
.hsvc__c li a:hover,.hsvc__c li a:focus-visible{color:var(--cyan)}
html:is([lang=en],[lang=tr],[lang=zh]) .hsvc__c li a{font-family:var(--lat);font-size:14px}
.hsvc__c .srow__go{align-self:flex-start;margin-top:auto}
@media (max-width:900px){.hsvc{grid-template-columns:1fr}}
.news--home h2.t{margin-bottom:clamp(32px,4vw,56px)}
.news--home .btn{margin-top:clamp(32px,4vw,56px)}
.ncard__go{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px}
.ncard .ncard__go .srow__go,.nfeat .ncard__go .srow__go,.act .ncard__go .srow__go{margin-top:0}
.srow__ext{border-bottom-style:dashed}
.svcp__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.svcp__main .svcp__acts .btn{margin-top:0}

/* trusted clients: a sliding strip that pauses on hover; static and wrapped for reduced motion */
.clients__slider{overflow:hidden;direction:ltr;border-block:1px solid rgba(31,44,86,.14);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.clients__track{display:flex;width:max-content;margin:0;padding:0;list-style:none;animation:clientsSlide 42s linear infinite}
.clients__slider:hover .clients__track,.clients__slider:focus-within .clients__track{animation-play-state:paused}
.clients__track li{flex:none;display:flex;align-items:center;justify-content:center;width:clamp(120px,14vw,180px);height:clamp(84px,9vw,112px);color:#737880;transition:color .4s}
.clients__track li:hover{color:var(--head)}
.clients__track svg{width:clamp(34px,3.6vw,46px);height:auto}
@keyframes clientsSlide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .clients__slider{-webkit-mask-image:none;mask-image:none}
  .clients__track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .clients__track li[aria-hidden=true]{display:none}
}

/* about: legal team cards and the pop-up with each person's details */
.team .lead{margin-bottom:clamp(32px,4vw,52px)}
.tm-card{display:block;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:start;cursor:pointer}
.tm-card img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;background:#fff;transition:filter .5s}
.tm-card:hover img{filter:brightness(.96) contrast(1.03)}
.tm-card__t{display:block;padding-top:16px}
.tm-card__n{display:block;font:800 clamp(18px,1.6vw,21px)/1.5 var(--ar);color:var(--head);transition:color .3s}
.tm-card:hover .tm-card__n,.tm-card:focus-visible .tm-card__n{color:var(--cyan)}
.tm-card__d{display:-webkit-box;margin-top:6px;font-size:15px;line-height:1.8;color:#2c324a;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tm-card__go{display:inline-block;margin-top:10px;padding-bottom:3px;border-bottom:1px solid currentColor;color:var(--cyan);font:700 14px/1.4 var(--arb)}
.tm-card:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
html:is([lang=en],[lang=tr],[lang=zh]) .tm-card__n,html:is([lang=en],[lang=tr],[lang=zh]) .tm h3{font-family:var(--lat);letter-spacing:.01em}
html:is([lang=en],[lang=tr],[lang=zh]) .tm-card__go{font-family:var(--lat);font-size:12.5px;letter-spacing:.06em}
.team__lead{margin-bottom:clamp(44px,5vw,76px)}
.tm-card--lead{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;width:100%}
.tm-card--lead .tm-card__t{padding-top:0}
.tm-card--lead .tm-card__n{font-size:clamp(26px,3vw,40px)}
.tm-card--lead .tm-card__d{display:block;font-size:clamp(17px,1.5vw,20px)}
.team__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(20px,2.5vw,36px)}
@media (max-width:900px){.team__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tm-card--lead{grid-template-columns:minmax(0,200px) minmax(0,1fr)}}
@media (max-width:560px){.team__grid{grid-template-columns:1fr}.tm-card--lead{grid-template-columns:1fr}}
.tm{width:100%;max-width:min(860px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;overflow:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);box-shadow:0 40px 80px rgba(3,5,14,.45)}
.tm::backdrop{background:rgba(3,5,14,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tm[open]{animation:tmIn .35s var(--ease)}
@keyframes tmIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.tm__in{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr)}
.tm__in img{display:block;width:100%;height:100%;min-height:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;background:#fff}
.tm__t{padding:clamp(28px,4vw,48px);align-self:center}
.tm h3{margin:0 0 12px;font:800 clamp(24px,2.6vw,34px)/1.4 var(--ar);color:var(--head)}
.tm__d{margin:0 0 22px;font-size:18px;line-height:1.9;color:#2c324a}
.tm__t p{margin:0 0 16px}
.tm__dl{margin:0 0 24px;border-top:1px solid rgba(31,44,86,.16)}
.tm__dl>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px;padding:12px 0;border-bottom:1px solid rgba(31,44,86,.16)}
.tm__dl dt{font-weight:700;color:var(--head)}
.tm__dl dd{margin:0}
.tm__x{position:absolute;top:12px;inset-inline-end:12px;z-index:1;width:44px;height:44px;border:0;background:var(--navy);cursor:pointer;transition:background .3s}
.tm__x::before,.tm__x::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;margin:-1px 0 0 -9px;background:#fff;transform:rotate(45deg)}
.tm__x::after{transform:rotate(-45deg)}
.tm__x:hover{background:var(--cyan)}
.tm__x:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
@media (max-width:700px){.tm__in{grid-template-columns:1fr}.tm__in img{aspect-ratio:4/3;object-position:50% 18%}}
.tm{margin:auto}

/* about page photo keeps its own colors (the grey + steel tint is for the stock photo on the home page) */
.about__img--photo img{filter:none;object-position:50% 38%}
.about__img--photo::after{display:none}

/* inner-page banners: breadcrumb, one-line subtitle, and a composition per page */
.banner__in{position:relative;z-index:1}
.crumbs--hero{margin-bottom:22px;color:#C7D3EC}
.crumbs--hero a{color:#fff;opacity:.88}
.crumbs--hero a:hover{color:var(--ice);opacity:1}
.crumbs__cur{opacity:.75}
.banner__sub{margin:18px 0 0;max-width:34em;font:500 clamp(17px,1.6vw,22px)/1.8 var(--arb);color:#DCE5F8;text-shadow:0 1px 16px rgba(3,5,14,.85)}
html:is([lang=en],[lang=tr],[lang=zh]) .banner__sub{font-family:var(--lat);letter-spacing:.02em}
.banner__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.banner__chips a{padding:11px 20px;border:1px solid rgba(183,200,235,.55);background:rgba(3,5,14,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;text-decoration:none;font:600 15px/1 var(--arb);transition:background .3s,color .3s}
.banner__chips a:hover,.banner__chips a:focus-visible{background:#fff;color:var(--navy)}
html:is([lang=en],[lang=tr],[lang=zh]) .banner__chips a{font-family:var(--lat);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.banner--center .banner__in{text-align:center}
.banner--center .crumbs--hero{justify-content:center}
.banner--center .banner__sub{margin-inline:auto}
.banner--start .banner__in,.banner--bottom .banner__in{text-align:start}
.banner--start .bt{max-width:14em;margin-inline:0}
[dir=rtl] .banner--start::before{background:linear-gradient(270deg,rgba(3,5,14,.86),rgba(3,5,14,.5) 55%,rgba(3,5,14,.22))}
[dir=ltr] .banner--start::before{background:linear-gradient(90deg,rgba(3,5,14,.86),rgba(3,5,14,.5) 55%,rgba(3,5,14,.22))}
.banner--bottom{align-items:flex-end;min-height:68vh}
.banner--bottom::before{background:linear-gradient(180deg,rgba(3,5,14,.35),rgba(3,5,14,.2) 35%,rgba(3,5,14,.88))}
.banner--bottom .bt{font-size:clamp(46px,9vw,132px)}
.banner--svc .bt{max-width:20em}
.banner--photo .banner__bg img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.banner--start .bt{max-width:none}}
.banner .banner__in{width:100%}
/* photo banner with centered text: the text sits in the empty sky at the top, the picture's subject is left clear below it */
.banner--photo.banner--center{align-items:flex-start;min-height:82vh}
.banner--photo.banner--center .banner__in{padding-top:28px;padding-bottom:40px}
.banner--photo.banner--center .bt{font-size:clamp(40px,6vw,88px);line-height:1.2}
html:is([lang=en],[lang=tr],[lang=zh]) .banner--photo.banner--center .bt{font-size:clamp(32px,4.6vw,66px)}
.banner--photo.banner--center .banner__chips{margin-top:24px}
/* photo banner with the title at the bottom: the picture's subject stays clear above, the title sits on the dark floor */
.banner--photo.banner--bottom{min-height:80vh}
.banner--photo.banner--bottom .bt{font-size:clamp(40px,6vw,88px);line-height:1.2}
html:is([lang=en],[lang=tr],[lang=zh]) .banner--photo.banner--bottom .bt{font-size:clamp(32px,4.6vw,66px)}
.banner--photo.banner--bottom .banner__in{padding-top:0;padding-bottom:48px}

/* home: the three main services as three tall photo cards (the full lists live on the Services page) */
.hcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(36px,5vw,64px)}
.hcard{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--navy);color:#fff;text-decoration:none;isolation:isolate}
.hcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.hcard::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,5,14,.05) 30%,rgba(3,5,14,.9) 100%)}
.hcard:hover img,.hcard:focus-visible img{transform:scale(1.05)}
.hcard__t{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2.4vw,32px)}
.hcard__n{font:600 14px/1.4 var(--arb);color:#C7D3EC}
.hcard__h{font:800 clamp(22px,2.2vw,30px)/1.4 var(--ar)}
html:is([lang=en],[lang=tr],[lang=zh]) .hcard__h{font-family:var(--lat);letter-spacing:.01em}
.hcard__d{font-size:16px;line-height:1.8;color:#DCE5F8}
.hcard__go{align-self:flex-start;margin-top:8px;padding-bottom:3px;border-bottom:1px solid currentColor;font:700 15px/1.4 var(--arb);color:var(--ice);transition:color .3s}
.hcard:hover .hcard__go{color:#fff}
.hcard:focus-visible{outline:2px solid var(--ice);outline-offset:4px}
@media (max-width:900px){.hcards{grid-template-columns:1fr}.hcard{aspect-ratio:16/11}}
.hcard::before{background:linear-gradient(180deg,rgba(3,5,14,.12) 0%,rgba(3,5,14,.55) 42%,rgba(3,5,14,.94) 100%)}
.hcard__n{color:#E3E9F7}
/* the three category cards are always the same height; the text block fills the rest */
.svc-cards{align-items:stretch}
.svc-card{height:100%}
.svc-card h3{margin-top:18px;min-height:2.8em}
.svc-card p{flex:1}
.hcard__h{min-height:2.8em;display:flex;align-items:flex-end}
.hcard__d{min-height:5.4em}
.svc-card h3{min-height:0}
.hcard__h{align-items:flex-start}

/* page changes feel instant: the old page stays until the new one has painted, then they cross-fade */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
/* banner: the title and the picture animate by themselves (CSS only), they never wait for scripts or images */
.banner{background:var(--navy)}
.banner .bt .w>span{transform:none;animation:btIn .9s var(--ease) both}
@keyframes btIn{from{transform:translateY(105%)}to{transform:none}}
.banner__bg img{animation:bgIn .9s ease both}
@keyframes bgIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.banner .bt .w>span,.banner__bg img{animation:none}}

/* banner: no entrance animation. Title and picture are simply there. */
.banner .bt .w>span{animation:none!important;transform:none!important;transition:none!important}
.banner__bg img{animation:none!important}
.is-ready .banner .bt .w>span{transition:none}
/* item-page banners: a static blue-graded photo, no WebGL, visible on first paint */
.banner__bg--static{overflow:hidden}
.banner__bg--static img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.9)}
.banner__bg--static::after{content:"";position:absolute;inset:0;background:#2B3C72;mix-blend-mode:color;opacity:.9}
.banner__bg--static img{filter:grayscale(1) contrast(1.1) brightness(.55)}
/* instant placeholder: a tiny blurry copy of the banner picture is the background, the real picture covers it when it arrives */
.banner__bg--lq{background-size:cover;background-repeat:no-repeat;background-position:50% 50%}
.hero__bg{background-size:cover;background-position:50% 62%;background-repeat:no-repeat}
main:focus{outline:none}

/* watch without strap: crop the box to the case */
.wx{aspect-ratio:1}
.wx .watch{inset:auto;left:0;top:-21.4286%;height:142.857%}
.watch--back{-webkit-mask-image:none;mask-image:none}

/* watch, "pure silver" (mockup 02): coin-edge case, silver sunburst dial, navy roman numerals, blued-steel lance hands, the logo on the dial */
.wcase::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(#f6f8ff 0 .6deg,#5f6b8b .6deg 1.2deg);
  -webkit-mask:radial-gradient(circle closest-side,transparent 91%,#000 91.5%);mask:radial-gradient(circle closest-side,transparent 91%,#000 91.5%)}
.wdial{background:radial-gradient(circle at 50% 30%,#ffffff 0%,#d9e1f4 48%,#9aa6c4 100%);box-shadow:inset 0 0 0 2px #7a86a6,inset 0 6px 18px rgba(10,15,38,.25)}
.wsun{background:
  conic-gradient(from var(--sun,24deg),rgba(255,255,255,0) 0,rgba(255,255,255,.5) 7%,rgba(255,255,255,0) 19%,rgba(255,255,255,0) 50%,rgba(255,255,255,.32) 57%,rgba(255,255,255,0) 69%),
  repeating-conic-gradient(rgba(10,15,38,.07) 0 .55deg,rgba(10,15,38,0) .55deg 1.7deg)}
.watch .mt{stroke:rgba(10,15,38,.5);stroke-width:1}
.watch .mt.mj{stroke-width:1.8}
.watch .rn{font:700 13.5px/1 var(--lat);fill:#0A0F26;text-anchor:middle;dominant-baseline:central}
.watch .wlance{fill:#0A0F26}
.watch .hnd>g>path:not(.lume):not(.sc){stroke:rgba(3,5,14,.6)}
.watch .lume{display:none}
.watch .sc{stroke:#446CCF}
.watch .sd{fill:#446CCF}
.wx .hnd{filter:drop-shadow(1.5px 4px 2.5px rgba(10,15,38,.4))}



/* legal team: one row per person, full profile beside the photo. The photo sits on the left in Arabic and on the right in English
   (it follows the text direction). Each row comes out of a blur as it scrolls in. */
.tmrs{display:grid;gap:clamp(56px,7vw,112px);margin-top:clamp(36px,5vw,64px)}
.tmr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(28px,5vw,80px);align-items:center;scroll-margin-top:calc(var(--hdr) + 24px)}
.tmr--lead{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
.tmr__img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;background:#fff}
.tmr__n{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 8px;font:800 clamp(22px,2.2vw,30px)/1.45 var(--ar);color:var(--head)}
.tmr--lead .tmr__n{font-size:clamp(28px,3.2vw,42px)}
.tmr__n .smp{font-size:12px}
.tmr__d{margin:0 0 18px;font:600 clamp(17px,1.4vw,19px)/1.8 var(--arb);color:var(--cyan)}
.tmr__bio{max-width:62ch;color:#2c324a}
.tmr__bio p+p{margin-top:12px}
.tmr .tm__dl{margin-top:22px}
html:is([lang=en],[lang=tr],[lang=zh]) .tmr__n{font-family:var(--lat);letter-spacing:.01em;text-transform:none}
html:is([lang=en],[lang=tr],[lang=zh]) .tmr__d{font-family:var(--lat)}
.js .tmr.rv{filter:blur(18px);transform:translateY(34px) scale(.985);transition:opacity 1.1s var(--ease),transform 1.2s var(--ease),filter 1.4s var(--ease)}
.js .tmr.rv.in{filter:blur(0);transform:none}
@media (max-width:760px){
  .tmr,.tmr--lead{grid-template-columns:1fr}
  .tmr__img{order:-1;max-width:340px}
}
@media (prefers-reduced-motion:reduce){.js .tmr.rv{filter:none;transform:none}}

/* home services: "view services" ends in a small lance; clicking a card throws a lance at it before the page opens */
.hcard__go{display:inline-flex;align-items:center;gap:10px;border-bottom:0;padding-bottom:0}
.golance{width:40px;height:8px;fill:currentColor;flex:none;transition:transform .5s var(--ease)}
[dir=rtl] .golance{transform:scaleX(-1)}
.hcard:hover .golance{transform:translateX(6px)}
[dir=rtl] .hcard:hover .golance{transform:scaleX(-1) translateX(6px)}
.flylance{position:fixed;left:0;top:0;z-index:150;width:16px;height:176px;pointer-events:none;transform-origin:50% 0;filter:drop-shadow(0 6px 10px rgba(3,5,14,.45))}
.hcard.is-hit{animation:hcard-hit .5s var(--ease)}
.hcard.is-hit::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at var(--hx,50%) var(--hy,50%),rgba(233,238,255,.55),rgba(68,108,207,.18) 22%,transparent 46%);animation:hcard-flash .6s var(--ease) forwards}
@keyframes hcard-hit{0%{transform:none}30%{transform:translateY(5px) scale(.985)}100%{transform:none}}
@keyframes hcard-flash{from{opacity:1}to{opacity:0}}

/* ---------- FAQ as old letters ----------
   Each question is the back of a sealed envelope. Opening it lifts the flap, then the letter rises out of the envelope and covers it,
   with the answer handwritten and a page number in the corner. 30 styles = 6 papers (p1-p6) x 5 trims (t1-t5); flap shape f1-f3 = (n-1)%3+1.
   data-env="n" (1-30) is the style id the backend will store per question: paper = (n-1)%6+1, trim = floor((n-1)/6)+1. */
.faq .envs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.4vw,52px) clamp(20px,3vw,44px);margin-top:clamp(36px,5vw,64px);align-items:start}
.env{--pa:#efe3c8;--pb:#e2d2ad;--pc:#d6c39a;--ink:#3b2f1e;--seal:#8f2420;--seal2:#b8402f;--fh:38.46%;
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);perspective:1400px}
.env--p1{--pa:#efe3c8;--pb:#e2d2ad;--pc:#cdb88c;--ink:#3b2f1e}
.env--p2{--pa:#cba97a;--pb:#b99462;--pc:#a5814f;--ink:#2e2112}
.env--p3{--pa:#f6efdd;--pb:#ebe1c6;--pc:#d9ccab;--ink:#2a2a35}
.env--p4{--pa:#e1e7f0;--pb:#cdd6e4;--pc:#b4c1d6;--ink:#1F2C56}
.env--p5{--pa:#1d2c5e;--pb:#16234d;--pc:#0f1a3c;--ink:#E9EEFF}
.env--p6{--pa:#ecdcd2;--pb:#dec8bb;--pc:#c9ad9c;--ink:#3a2620}
.env--f1{--fh:38.46%}.env--f2{--fh:35.71%}.env--f3{--fh:22.73%}
.env__front,.env__letter{grid-area:1/1}
.env__front{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:14px;width:100%;aspect-ratio:16/10.5;
  padding:calc(var(--fh) + 38px) 9% 5.5%;margin:0;border:0;border-radius:3px;cursor:pointer;text-align:center;color:var(--ink);font:inherit;
  background:
    linear-gradient(to top right,transparent calc(50% - .6px),rgba(0,0,0,.09) 50%,transparent calc(50% + .6px)) left bottom/50% 62% no-repeat,
    linear-gradient(to top left,transparent calc(50% - .6px),rgba(0,0,0,.09) 50%,transparent calc(50% + .6px)) right bottom/50% 62% no-repeat,
    repeating-radial-gradient(circle at 30% 40%,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),
    var(--pa);
  box-shadow:inset 0 0 46px rgba(90,60,20,.16),0 18px 34px -14px rgba(3,5,14,.45),0 2px 4px rgba(3,5,14,.12);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.env__front:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:inset 0 0 46px rgba(90,60,20,.16),0 26px 40px -14px rgba(3,5,14,.5),0 2px 4px rgba(3,5,14,.12)}
.env__front:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}
.env__flap{position:absolute;inset:0 0 auto;z-index:2;width:100%;aspect-ratio:2.6/1;transform-origin:50% 0;
  background:linear-gradient(180deg,var(--pb),var(--pc));
  clip-path:polygon(0 0,100% 0,50% 100%);transition:transform .7s cubic-bezier(.5,0,.2,1) .25s}
.env--f2 .env__flap{aspect-ratio:2.8/1;clip-path:polygon(0 0,100% 0,62% 86%,56% 96%,50% 100%,44% 96%,38% 86%)}
.env--f3 .env__flap{aspect-ratio:4.4/1;clip-path:polygon(0 0,100% 0,96% 100%,4% 100%)}
.env__seal{position:absolute;z-index:3;left:50%;top:0;width:52px;height:52px;margin:calc(var(--fh) - 38px) 0 0 -26px;display:grid;place-items:center;
  background:radial-gradient(circle at 38% 34%,var(--seal2),var(--seal) 62%,#2a0806);
  box-shadow:0 0 0 3px var(--seal),0 3px 6px rgba(0,0,0,.35),inset 0 -3px 6px rgba(0,0,0,.35);
  border-radius:47% 53% 50% 50%/52% 48% 52% 48%;transition:opacity .35s,transform .5s var(--ease)}
.env__seal svg{width:12px;height:34px;fill:rgba(0,0,0,.35);filter:drop-shadow(0 1px 0 rgba(255,255,255,.25))}
.env--f3 .env__seal{margin-top:calc(var(--fh) - 26px)}
.env__stamp{display:none;position:absolute;z-index:3;inset-inline-end:6%;bottom:9%;width:58px;height:70px;padding:5px;transform:rotate(4deg);background:#f8f3e6;
  -webkit-mask:radial-gradient(circle,transparent 2.4px,#000 2.8px) -3.5px -3.5px/7px 7px;mask:radial-gradient(circle,transparent 2.4px,#000 2.8px) -3.5px -3.5px/7px 7px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.env__stamp svg{display:block;width:100%;height:100%;padding:6px 17px;background:linear-gradient(160deg,#2B3C72,#446CCF);fill:#E9EEFF}
.env__q{position:relative;z-index:1;display:block;font:700 clamp(16px,1.35vw,19px)/1.75 var(--arb);color:var(--ink);text-wrap:balance}
html:is([lang=en],[lang=tr],[lang=zh]) .env__q{font-family:var(--latb);font-size:clamp(15px,1.2vw,17px)}
.env__open{position:relative;z-index:1;align-self:center;padding-top:6px;border-top:1px solid currentColor;font:600 13px/1.4 var(--arb);color:var(--ink);opacity:.75}
html:is([lang=en],[lang=tr],[lang=zh]) .env__open{font-family:var(--lat);letter-spacing:.08em}
/* trims */
.env--t1 .env__front{border:8px solid transparent;border-image:repeating-linear-gradient(45deg,#b23a32 0 9px,var(--pa) 9px 18px,#2B3C72 18px 27px,var(--pa) 27px 36px) 8}
.env--t1{--seal:#1F2C56;--seal2:#3a55a6}
.env--t2{--seal:#8f2420;--seal2:#c2483a}
.env--t3 .env__seal{width:30px;height:30px;margin:calc(var(--fh) - 22px) 0 0 -15px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#d8c9a8,#8e7a55);box-shadow:0 2px 3px rgba(0,0,0,.3),inset 0 -2px 3px rgba(0,0,0,.25)}
.env--t3 .env__seal svg{display:none}
.env--t3 .env__front::after{content:"";position:absolute;z-index:2;left:50%;top:0;width:3px;height:100%;margin-left:-1.5px;background:repeating-linear-gradient(180deg,#8a5a3a 0 3px,#a8734d 3px 6px);opacity:.8;transform:rotate(9deg);pointer-events:none;transition:opacity .3s}
.env--t4 .env__seal{display:none}
.env--t4 .env__stamp{display:block}
.env--t4 .env__front::before{content:"AL-REMAH";position:absolute;z-index:3;inset-inline-end:calc(6% + 34px);bottom:calc(9% + 24px);width:74px;height:74px;display:grid;place-items:center;border:2px solid rgba(31,44,86,.45);border-radius:50%;
  font:700 10px/1 var(--lat);letter-spacing:.14em;color:rgba(31,44,86,.55);transform:rotate(-14deg);box-shadow:inset 0 0 0 6.5px rgba(31,44,86,.3);pointer-events:none}
.env--t5 .env__front{outline:1px solid var(--pc);outline-offset:-10px}
.env--t5 .env__front::after{content:"";position:absolute;inset:14px;border:1px solid var(--pc);pointer-events:none}
.env--t5{--seal:#8a6a28;--seal2:#d8b25c}
.env--p5 .env__front{box-shadow:inset 0 0 46px rgba(0,0,0,.35),0 18px 34px -14px rgba(3,5,14,.6)}
.env--p5.env--t4 .env__front::before{border-color:rgba(233,238,255,.4);color:rgba(233,238,255,.55);box-shadow:inset 0 0 0 6.5px rgba(233,238,255,.3)}
.env--p5.env--t5 .env__front,.env--p5.env--t5 .env__front::after{outline-color:rgba(233,238,255,.25);border-color:rgba(233,238,255,.25)}
/* the letter */
.env__letter{position:relative;z-index:4;align-self:start;min-height:100%;padding:clamp(34px,3.4vw,46px) clamp(24px,3vw,44px) clamp(24px,3vw,36px);
  color:#1d2340;
  background:
    linear-gradient(90deg,transparent 0 calc(100% - 46px),rgba(178,58,50,.3) calc(100% - 46px) calc(100% - 45px),transparent calc(100% - 45px)),
    repeating-linear-gradient(180deg,transparent 0 37px,rgba(68,108,207,.2) 37px 38px),
    radial-gradient(circle at 20% 15%,rgba(255,255,255,.6),transparent 60%),#fbf8ef;
  background-position:0 0,0 22px,0 0,0 0;
  box-shadow:0 30px 50px -20px rgba(3,5,14,.45),0 1px 2px rgba(3,5,14,.15)}
html:is([lang=en],[lang=tr],[lang=zh]) .env__letter{background:
    linear-gradient(90deg,transparent 0 45px,rgba(178,58,50,.3) 45px 46px,transparent 46px),
    repeating-linear-gradient(180deg,transparent 0 37px,rgba(68,108,207,.2) 37px 38px),
    radial-gradient(circle at 20% 15%,rgba(255,255,255,.6),transparent 60%),#fbf8ef;
  background-position:0 0,0 22px,0 0,0 0}
.env__pg{position:absolute;top:14px;inset-inline-start:22px;font:700 18px/1 'Aref Ruqaa','Amiri',serif;color:#8a2a24}
html:is([lang=en],[lang=tr],[lang=zh]) .env__pg{font:700 20px/1 'Caveat',cursive}
.env__lq{margin:6px 0 14px;padding-inline-start:48px;font:700 19px/1.9 'Aref Ruqaa','Amiri',serif;color:#2B3C72}
.env__ans p{margin:0;font:400 clamp(19px,1.6vw,22px)/38px 'Aref Ruqaa','Amiri',serif;color:#1d2340}
html:is([lang=en],[lang=tr],[lang=zh]) .env__lq{font:700 24px/1.5 'Caveat',cursive}
html:is([lang=en],[lang=tr],[lang=zh]) .env__ans p{font:500 clamp(21px,1.7vw,24px)/38px 'Caveat',cursive}
.env__close{display:block;margin-top:22px;margin-inline-start:auto;padding:8px 0 3px;border:0;border-bottom:1px solid currentColor;background:none;font:600 14px/1.4 var(--arb);color:var(--cyan);cursor:pointer}
html:is([lang=en],[lang=tr],[lang=zh]) .env__close{font-family:var(--lat);letter-spacing:.06em}
/* motion (only with JS; without it the letter simply sits under its envelope) */
.js .env__letter{position:absolute;inset:0 0 auto;visibility:hidden;opacity:0;transform:translateY(22%) scale(.94);clip-path:inset(0 0 72% 0);
  transition:opacity .45s ease,transform .55s var(--ease),clip-path .5s var(--ease),visibility 0s linear .6s}
.js .env.is-open .env__letter{position:relative;visibility:visible;opacity:1;transform:none;clip-path:inset(0 0 0 0);
  transition:opacity .5s ease .45s,transform .9s var(--ease) .45s,clip-path 1s var(--ease) .45s,visibility 0s}
.js .env.is-open .env__flap{transform:rotateX(178deg);transition-delay:0s}
.js .env.is-open .env__seal{opacity:0;transform:scale(.6) translateY(-10px)}
.js .env.is-open .env__front::after{opacity:0}
.env.is-open .env__front{pointer-events:none}
html:not(.js) .env__letter{grid-area:2/1;margin-top:-10px}
@media (max-width:760px){
  .faq .envs{grid-template-columns:1fr}
  .env__seal{width:44px;height:44px;margin-left:-22px;margin-top:calc(var(--fh) - 32px)}
  .env--f3 .env__seal{margin-top:calc(var(--fh) - 22px)}
  .env__stamp{width:46px;height:56px}
  .env--t4 .env__front::before{width:58px;height:58px;font-size:8px;inset-inline-end:calc(6% + 26px);bottom:calc(9% + 18px)}
}
@media (prefers-reduced-motion:reduce){
  .env__flap,.env__seal,.js .env__letter,.js .env.is-open .env__letter,.env__front{transition:none!important}
}

/* services page: the "view service" link is a lance; it thrusts toward the reading direction, then the service opens */
.srow__lance{display:inline-grid;place-items:center;width:64px;height:44px;padding:0;border:0}
.srow__lance .golance{width:58px;height:12px}
.srow__lance:hover .golance,.srow__lance:focus-visible .golance{transform:translateX(8px)}
[dir=rtl] .srow__lance:hover .golance,[dir=rtl] .srow__lance:focus-visible .golance{transform:scaleX(-1) translateX(8px)}
.srow__lance.is-thrust .golance{animation:thrust .32s cubic-bezier(.6,0,.3,1)}
[dir=rtl] .srow__lance.is-thrust .golance{animation-name:thrust-rtl}
@keyframes thrust{0%{transform:none}35%{transform:translateX(-10px)}100%{transform:translateX(26px)}}
@keyframes thrust-rtl{0%{transform:scaleX(-1)}35%{transform:scaleX(-1) translateX(-10px)}100%{transform:scaleX(-1) translateX(26px)}}

/* FAQ envelopes, Victorian pass: a dark desk, real aged-paper texture (multiplied into each paper colour), a lit wax seal with the lance
   pressed into it, an engraved stamp with an inked postmark, corner ornaments, and envelopes laid slightly askew like real post. */
.faq{position:relative;isolation:isolate;background:radial-gradient(ellipse 80% 70% at 50% 0%,#16245a 0%,#0A0F26 58%,#03050E 100%)}
.faq::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(92deg,rgba(255,255,255,.012) 0 2px,transparent 2px 7px),repeating-linear-gradient(88deg,rgba(0,0,0,.18) 0 1px,transparent 1px 11px)}
.faq h2.t{color:var(--white)}
.faq .lead{color:#C7CEE2}
.env-defs{position:absolute;width:0;height:0;overflow:hidden}
.envs .env:nth-child(4n+1){--rot:-1deg}.envs .env:nth-child(4n+2){--rot:.8deg}.envs .env:nth-child(4n+3){--rot:.5deg}.envs .env:nth-child(4n){--rot:-.7deg}
.env__front{transform:rotate(var(--rot,0deg));
  background:
    linear-gradient(to top right,transparent calc(50% - .7px),rgba(60,40,15,.16) 50%,rgba(255,255,255,.18) calc(50% + .7px),transparent calc(50% + 1.6px)) left bottom/50% 62% no-repeat,
    linear-gradient(to top left,transparent calc(50% - .7px),rgba(60,40,15,.16) 50%,rgba(255,255,255,.18) calc(50% + .7px),transparent calc(50% + 1.6px)) right bottom/50% 62% no-repeat,
    url(img/paper-aged.webp) center/cover;
  background-color:var(--pa);background-blend-mode:normal,normal,multiply;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 60px rgba(70,45,15,.28),0 30px 40px -18px rgba(0,0,0,.75),0 6px 10px rgba(0,0,0,.35)}
.env__front:hover{transform:rotate(0deg) translateY(-6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 60px rgba(70,45,15,.28),0 42px 50px -18px rgba(0,0,0,.8),0 8px 14px rgba(0,0,0,.35)}
.env__flap{background:linear-gradient(180deg,var(--pb),var(--pc)),url(img/paper-aged.webp) center top/cover;background-blend-mode:multiply;
  filter:drop-shadow(0 4px 3px rgba(40,25,5,.35))}
.env--p5 .env__front,.env--p5 .env__flap{background-blend-mode:normal,normal,soft-light}
.env--p5 .env__flap{background-blend-mode:soft-light}
.env__seal{width:70px;height:70px;margin:calc(var(--fh) - 46px) 0 0 -35px;background:none;box-shadow:none;border-radius:0;color:var(--seal);filter:drop-shadow(0 4px 3px rgba(0,0,0,.45))}
.env__seal svg{display:block;width:100%;height:100%;fill:none;filter:none}
.env--f3 .env__seal{margin-top:calc(var(--fh) - 34px)}
.env--t1{--seal:#203372}
.env--t2{--seal:#9b231c}
.env--t3{--seal:#7a2a4a}
.env--t5{--seal:#a8812f}
.env--t3 .env__seal{width:54px;height:54px;margin:calc(var(--fh) - 36px) 0 0 -27px;border-radius:0;background:none;box-shadow:none}
.env--t3 .env__seal svg{display:block}
.env--t3 .env__front::after{width:4px;margin-left:-2px;background:repeating-linear-gradient(135deg,#7d5233 0 2px,#b3825a 2px 4px,#6a4429 4px 6px);opacity:.95;box-shadow:0 1px 1px rgba(0,0,0,.35);transform:rotate(7deg)}
.env--t1 .env__front{border-width:7px;border-image:repeating-linear-gradient(45deg,#a3312b 0 10px,var(--pa) 10px 16px,#22336e 16px 26px,var(--pa) 26px 32px) 7}
.env--t4 .env__front::before{content:none}
.env--t4 .env__stamp{display:block;width:62px;height:75px;padding:0;background:none;transform:rotate(3deg);inset-inline-end:7%;bottom:auto;top:calc(var(--fh) + 16px)}
.env__stamp svg{padding:0;background:none}
.env__mark{position:absolute;z-index:4;width:150px;inset-inline-end:calc(7% + 26px);top:calc(var(--fh) + 34px);color:rgba(28,30,52,.62);transform:rotate(-9deg);pointer-events:none}
[dir=rtl] .env__mark{transform:rotate(-9deg) scaleX(-1)}
[dir=rtl] .env__mark text{transform-box:fill-box;transform-origin:center;transform:scaleX(-1)}
.env__mark svg{display:block;width:100%;height:auto;overflow:visible}
.env--t4 .env__q{padding-inline-end:84px}
.env__corners svg{position:absolute;z-index:1;width:38px;height:38px;fill:none;stroke:var(--ink);stroke-opacity:.5;stroke-width:1.2;pointer-events:none}
.env__corners .c0{top:16px;left:16px}
.env__corners .c1{top:16px;right:16px;transform:scaleX(-1)}
.env__corners .c2{bottom:16px;left:16px;transform:scaleY(-1)}
.env__corners .c3{bottom:16px;right:16px;transform:scale(-1)}
.env--t5 .env__front{outline:none}
.env--t5 .env__front::after{inset:12px;border:1px solid var(--ink);opacity:.28}
.env--p5.env--t5 .env__corners svg{stroke:#d8b25c;stroke-opacity:.75}
.env__q{text-shadow:0 1px 0 rgba(255,255,255,.25)}
.env--p5 .env__q{text-shadow:0 1px 1px rgba(0,0,0,.4)}
.env__letter{background:
    linear-gradient(90deg,transparent 0 calc(100% - 46px),rgba(178,58,50,.32) calc(100% - 46px) calc(100% - 45px),transparent calc(100% - 45px)),
    repeating-linear-gradient(180deg,transparent 0 37px,rgba(68,108,207,.22) 37px 38px),
    url(img/paper-letter.webp) center/cover,#f6efdf;
  background-position:0 0,0 22px,center,0 0;
  box-shadow:inset 0 0 50px rgba(120,90,40,.18),0 40px 60px -22px rgba(0,0,0,.8),0 2px 4px rgba(0,0,0,.25)}
html:is([lang=en],[lang=tr],[lang=zh]) .env__letter{background:
    linear-gradient(90deg,transparent 0 45px,rgba(178,58,50,.32) 45px 46px,transparent 46px),
    repeating-linear-gradient(180deg,transparent 0 37px,rgba(68,108,207,.22) 37px 38px),
    url(img/paper-letter.webp) center/cover,#f6efdf;
  background-position:0 0,0 22px,center,0 0}
.env__close{color:#2B3C72}
@media (max-width:760px){
  .env__seal{width:58px;height:58px;margin-left:-29px;margin-top:calc(var(--fh) - 38px)}
  .env--f3 .env__seal{margin-top:calc(var(--fh) - 28px)}
  .env--t4 .env__stamp{width:48px;height:58px;top:calc(var(--fh) + 8px)}
  .env__mark{width:116px;inset-inline-end:calc(7% + 18px);top:calc(var(--fh) + 22px)}
  .env--t4 .env__q{padding-inline-end:58px}
  .env__corners svg{width:28px;height:28px}
}
.env--p5 .env__flap{background:linear-gradient(180deg,#22336a,#121d44),url(img/paper-aged.webp) center top/cover;background-blend-mode:multiply}
.env--t3 .env__front::after{top:0;height:0;padding-bottom:calc(var(--fh) - 12px);transform:none}

/* FAQ: answers longer than one page. Pages are stacked in one grid cell (the letter takes the tallest page's height);
   turning a page lifts it away like a sheet and the next one settles in. Each page keeps its own number in the corner. */
.env__pages{display:grid;grid-template-columns:minmax(0,1fr);perspective:1600px}
.env__page{grid-area:1/1;position:relative;padding-top:4px}
.env__letter--multi .env__pg{top:-18px;inset-inline-start:0}
.env__letter--multi{padding-top:clamp(40px,3.8vw,52px)}
.js .env__page{visibility:hidden;opacity:0;transform-origin:0 50%;transform:rotateY(10deg) translateX(-14px);transition:opacity .45s ease,transform .6s var(--ease),visibility 0s linear .6s}
[dir=rtl] .js .env__page{transform-origin:100% 50%;transform:rotateY(-10deg) translateX(14px)}
.js .env__page.is-on{visibility:visible;opacity:1;transform:none;transition:opacity .5s ease .12s,transform .7s var(--ease) .12s,visibility 0s}
.js .env__page.is-out{visibility:visible;opacity:0;transform:rotateY(-68deg) translateX(30px);transition:opacity .45s ease,transform .6s cubic-bezier(.5,0,.75,0)}
[dir=rtl] .js .env__page.is-out{transform:rotateY(68deg) translateX(-30px)}
.env__nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding-top:14px;border-top:1px solid rgba(43,60,114,.2)}
.env__prev,.env__next{padding:8px 0 3px;border:0;border-bottom:1px solid currentColor;background:none;font:600 14px/1.4 var(--arb);color:#2B3C72;cursor:pointer}
.env__prev[disabled],.env__next[disabled]{opacity:.3;cursor:default}
.env__count{font:700 18px/1 'Aref Ruqaa','Amiri',serif;color:#8a2a24}
html:is([lang=en],[lang=tr],[lang=zh]) .env__prev,html:is([lang=en],[lang=tr],[lang=zh]) .env__next{font-family:var(--lat);letter-spacing:.06em}
html:is([lang=en],[lang=tr],[lang=zh]) .env__count{font:700 20px/1 'Caveat',cursive}
.env__q .smp{display:inline-block;vertical-align:middle;margin-inline-start:6px;border-color:currentColor;color:inherit;font-size:11px}
html:not(.js) .env__page+.env__page{margin-top:24px;padding-top:24px;border-top:1px dashed rgba(43,60,114,.3)}
html:not(.js) .env__nav{display:none}
@media (prefers-reduced-motion:reduce){.js .env__page,.js .env__page.is-on,.js .env__page.is-out{transition:none!important}}
.env__front{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 0 34px rgba(110,80,35,.12),0 30px 40px -18px rgba(0,0,0,.75),0 6px 10px rgba(0,0,0,.35)}
.env__front:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 0 34px rgba(110,80,35,.12),0 42px 50px -18px rgba(0,0,0,.8),0 8px 14px rgba(0,0,0,.35)}
.env__letter{background-image:linear-gradient(90deg,transparent 0 calc(100% - 46px),rgba(178,58,50,.32) calc(100% - 46px) calc(100% - 45px),transparent calc(100% - 45px)),repeating-linear-gradient(180deg,transparent 0 37px,rgba(68,108,207,.22) 37px 38px),url(img/paper-aged.webp);background-color:#fbf7ec;background-size:auto,auto,cover;background-blend-mode:normal,normal,multiply;box-shadow:inset 0 0 30px rgba(120,90,40,.1),0 40px 60px -22px rgba(0,0,0,.8),0 2px 4px rgba(0,0,0,.25)}
html:is([lang=en],[lang=tr],[lang=zh]) .env__letter{background-image:linear-gradient(90deg,transparent 0 45px,rgba(178,58,50,.32) 45px 46px,transparent 46px),repeating-linear-gradient(180deg,transparent 0 37px,rgba(68,108,207,.22) 37px 38px),url(img/paper-aged.webp)}
.js .env__page.is-on{visibility:inherit}
.envs .env:nth-child(n){--rot:0deg}
.env__front:hover{transform:translateY(-6px)}

/* FAQ in live 3D (desktop): assets/env3d.js draws the envelopes on one canvas behind the buttons. The buttons stay for clicks,
   focus and screen readers but lose their CSS look; the HTML letter waits until the 3D letter has risen out of the pocket. */
.faq .envs{position:relative}
.env3d-canvas{position:absolute;z-index:0;left:-80px;top:-300px;width:calc(100% + 160px);height:calc(100% + 400px);pointer-events:none}
.faq.env3d .env{z-index:1}
.faq.env3d .env.rv{opacity:1;transform:none;filter:none}
.faq.env3d .env__front,.faq.env3d .env__front:hover{background:none;border:0;border-image:none;outline:none;box-shadow:none;transform:none;color:transparent}
.faq.env3d .env__front:focus-visible{outline:2px solid var(--ice);outline-offset:8px}
.faq.env3d .env__front::before,.faq.env3d .env__front::after{content:none}
.faq.env3d .env__flap,.faq.env3d .env__seal,.faq.env3d .env__stamp,.faq.env3d .env__mark,.faq.env3d .env__corners{display:none}
.faq.env3d .env__q,.faq.env3d .env__open{opacity:0}
.faq.env3d .env.is-open .env__letter{transition-delay:1.25s,1.25s,1.25s,0s}

/* watch: "الثنائي" (mockup 09), chosen by the client. Plain silver case, silver sunburst dial with a blue minute ring,
   white minute marks on the ring, navy lance indices, blued-steel lance hands, navy seconds */
.wcase::before{content:none}
.wdial{background:radial-gradient(circle closest-side,#f4f7ff 0%,#dfe6f7 62%,#c9d3ea 91%,#446CCF 91.5%,#2B3C72 100%);box-shadow:inset 0 0 0 2px #7a86a6,inset 0 6px 18px rgba(10,15,38,.25)}
.watch .mt{stroke:#EDF1FF}
.watch .li-g path{fill:url(#wN);stroke:rgba(10,15,38,.35);stroke-width:.4}
.watch .sc{stroke:#0A0F26}
.watch .sd{fill:#0A0F26}

/* flat envelopes painted by envart.js (phones, reduced motion, no WebGL): the canvas art replaces the CSS paper and trims */
.env--art .env__front,.env--art .env__front:hover{background-color:transparent;background-size:100% 100%;background-position:0 0;background-repeat:no-repeat;background-blend-mode:normal;border:0;border-image:none;outline:none}
.env--art .env__front::before,.env--art .env__front::after{content:none}
.env--art .env__stamp,.env--art .env__mark,.env--art .env__corners{display:none}
.env--art .env__flap{aspect-ratio:var(--flap-ar,2.6)/1;clip-path:none;background-color:transparent;background-size:100% 100%;background-repeat:no-repeat;background-blend-mode:normal;filter:drop-shadow(0 4px 3px rgba(40,25,5,.3))}
.env--art .env__seal{width:64px;height:64px;margin:calc(var(--fh) - 44px) 0 0 -32px;background-color:transparent;background-size:contain;background-repeat:no-repeat;box-shadow:none;border-radius:0;filter:none}
.env--art .env__seal svg{display:none}
.env--art .env__front{padding-top:calc(var(--fh) + 34px)}
.env--art .env__q{text-shadow:none}
@media (max-width:760px){.env--art .env__seal{width:54px;height:54px;margin-left:-27px;margin-top:calc(var(--fh) - 36px)}}
/* the 3D canvas is the size of the screen and follows it, so it stays small however many envelopes there are */
.env3d-canvas{position:fixed;left:0;top:0;width:100vw;height:100vh;height:100dvh}

/* letters, final pass: every letter is exactly the size of its envelope, pages are filled by main.js (overflow goes to the next page),
   and the letter comes out from behind the envelope: it rises out of the top, then is laid down over it.
   In 3D the canvas letter does the rising, so the HTML letter only takes over from where it stopped. */
.js .env__letter,.js .env.is-open .env__letter{position:absolute;inset:0;min-height:0;height:auto;display:flex;flex-direction:column;overflow:hidden;
  padding:clamp(26px,2.6vw,34px) clamp(22px,2.6vw,36px) 14px}
.js .env__src{display:none}
.js .env__pages{position:relative;flex:1;min-height:0;display:block;perspective:1600px}
.js .env__page{position:absolute;inset:0;display:flex;flex-direction:column;padding-top:4px}
.js .env__page .env__pg{top:-20px;inset-inline-start:-2px}
.js .env__body{flex:1;min-height:0;overflow:hidden}
.js .env__body p{margin:0}
.js .env__body .env__lq{margin:0 0 4px;padding-inline-start:44px}
.js .env__foot{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid rgba(43,60,114,.18)}
.js .env__foot .env__close{margin:0;padding:6px 0 2px}
.js .env__foot .env__nav{display:flex;align-items:center;gap:14px;margin:0;padding:0;border:0}
.js .env__letter--multi{padding-top:clamp(26px,2.6vw,34px)}
.env__front{position:relative;z-index:2}
@keyframes env-letter-flat{
  0%{transform:translateY(0);z-index:0}
  48%{transform:translateY(-66%);z-index:0}
  52%{transform:translateY(-66%) scale(1.01);z-index:6}
  100%{transform:none;z-index:6}
}
@keyframes env-letter-3d{0%{transform:translateY(-56%);opacity:0}12%{opacity:1}100%{transform:none;opacity:1}}
.js .env.is-open .env__letter{visibility:visible;opacity:1;transform:none;clip-path:none;z-index:6;transition:none;
  animation:env-letter-flat 1.5s cubic-bezier(.5,0,.25,1) .35s both}
.faq.env3d .env.is-open .env__letter{animation:env-letter-3d .85s cubic-bezier(.2,.7,.2,1) 1.3s both}
@media (prefers-reduced-motion:reduce){.js .env.is-open .env__letter,.faq.env3d .env.is-open .env__letter{animation:none}}
.js .env__letter,.js .env.is-open .env__letter{align-self:stretch;justify-self:stretch}
.js .env__body p:not(.env__lq){font:400 clamp(19px,1.6vw,22px)/38px 'Aref Ruqaa','Amiri',serif;color:#1d2340}
html:is([lang=en],[lang=tr],[lang=zh]) .js .env__body p:not(.env__lq),html:is([lang=en],[lang=tr],[lang=zh]).js .env__body p:not(.env__lq){font:500 clamp(21px,1.7vw,24px)/38px 'Caveat',cursive}
/* phones: the letter rises in front of the opened flap; only the part above the envelope shows while it rises */
@keyframes env-letter-flat2{
  0%{transform:translateY(0);clip-path:inset(0 0 100% 0)}
  48%{transform:translateY(-66%);clip-path:inset(0 0 34% 0)}
  56%{transform:translateY(-66%);clip-path:inset(0 0 0 0)}
  100%{transform:none;clip-path:inset(0 0 0 0)}
}
.js .env.is-open .env__letter{animation-name:env-letter-flat2}
.faq.env3d .env.is-open .env__letter{animation-name:env-letter-3d}
/* folding the letter back: the opening in reverse */
@keyframes env-letter-flat-out{
  0%{transform:none;clip-path:inset(0 0 0 0)}
  44%{transform:translateY(-66%);clip-path:inset(0 0 0 0)}
  52%{transform:translateY(-66%);clip-path:inset(0 0 34% 0)}
  100%{transform:translateY(0);clip-path:inset(0 0 100% 0)}
}
@keyframes env-letter-3d-out{0%{transform:none;opacity:1}85%{opacity:1}100%{transform:translateY(-56%);opacity:0}}
.js .env.is-open.is-closing .env__letter{animation:env-letter-flat-out 1.4s cubic-bezier(.5,0,.25,1) both}
.faq.env3d .env.is-open.is-closing .env__letter{animation:env-letter-3d-out .7s cubic-bezier(.5,0,.6,1) both}
.env.is-closing .env__letter *{pointer-events:none}
/* one size for every envelope and therefore every letter: the envelope keeps its ratio whatever the question length */
.env__front,.env--art .env__front{aspect-ratio:16/10.5;height:auto;min-height:0;overflow:hidden}
@media (max-width:760px){
  .env__front,.env--art .env__front{aspect-ratio:16/14}
  .env--art .env__front{padding-top:calc(var(--fh) + 26px);gap:8px}
  .env__q{font-size:15px;line-height:1.7}
  .js .env__foot{gap:8px 12px}
  .js .env__foot .env__nav{gap:10px;margin-inline-start:auto}
}
/* 3D: the paper itself travels in the canvas; the readable letter only fades in once the 3D one has landed in the same spot,
   and fades out first when folding, so there is one sheet on screen at all times */
.faq.env3d .env__letter{transform:none;clip-path:none;animation:none;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s}
.faq.env3d .env.is-open .env__letter{animation:none;transform:none;clip-path:none;opacity:1;visibility:visible;transition:opacity .35s ease 2.62s,visibility 0s linear 2.62s}
.faq.env3d .env.is-open.is-closing .env__letter{animation:none;opacity:0;transition:opacity .2s ease}
/* 3D: the readable letter waits for the stage to report the paper has landed (frame rate independent) */
.faq.env3d .env.is-open .env__letter{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.faq.env3d .env.is-open.is-landed .env__letter{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
.faq.env3d .env.is-open.is-landed.is-closing .env__letter{opacity:0;transition:opacity .2s ease}
/* the opened envelope's readable letter sits above its neighbours too */
.env.is-open{z-index:5}

/* legal team, each person on their own: the row waits until it is well in view, then the photo comes out of the blur,
   followed by the name and bio */
.js .tmr.rv{filter:none;transform:none;opacity:1;transition:none}
.js .tmr.rv .tmr__img,.js .tmr.rv .tmr__t{opacity:0;filter:blur(22px);transform:translateY(28px) scale(.97);
  transition:opacity 1.2s var(--ease),filter 1.6s var(--ease),transform 1.4s var(--ease)}
.js .tmr.rv .tmr__t{transition-delay:.25s}
.js .tmr.rv.on .tmr__img,.js .tmr.rv.on .tmr__t{opacity:1;filter:blur(0);transform:none}
@media (prefers-reduced-motion:reduce){.js .tmr.rv .tmr__img,.js .tmr.rv .tmr__t{opacity:1;filter:none;transform:none;transition:none}}
/* performance: nothing stays blurred while waiting; the blur only exists for the second the reveal plays, so scrolling stays light */
.js .tmr.rv .tmr__img,.js .tmr.rv .tmr__t{opacity:0;filter:none;transform:none;transition:none}
@keyframes tmr-in{from{opacity:0;filter:blur(22px);transform:translateY(28px) scale(.97)}to{opacity:1;filter:blur(0);transform:none}}
.js .tmr.rv.on .tmr__img,.js .tmr.rv.on .tmr__t{opacity:1;animation:tmr-in 1.5s cubic-bezier(.16,1,.3,1) both}
.js .tmr.rv.on .tmr__t{animation-delay:.25s}
@media (prefers-reduced-motion:reduce){.js .tmr.rv .tmr__img,.js .tmr.rv .tmr__t{opacity:1;animation:none}}

/* service pages, side list: a lance at the end of each line, its tip pointing at the service name.
   It thrusts in on hover; the current service's lance is blue and already pressed in. */
.svcp__side li a{display:flex;align-items:center;justify-content:space-between;gap:14px}
.svcp__side .sidelance{width:46px;height:9px;flex:none;fill:#9aa6c4;transform:scaleX(-1);transition:transform .45s var(--ease),fill .3s}
[dir=rtl] .svcp__side .sidelance{transform:none}
.svcp__side li a:hover .sidelance,.svcp__side li a:focus-visible .sidelance{fill:var(--cyan);transform:scaleX(-1) translateX(-8px)}
[dir=rtl] .svcp__side li a:hover .sidelance,[dir=rtl] .svcp__side li a:focus-visible .sidelance{transform:translateX(8px)}
.svcp__side li a[aria-current=page] .sidelance{fill:var(--cyan);transform:scaleX(-1) translateX(-10px)}
[dir=rtl] .svcp__side li a[aria-current=page] .sidelance{transform:translateX(10px)}

/* ===== watch, extra layers. index.html <section class="sec watch-sec lux lux-stage">: "lux" = glass + metal (2, 3), "lux-stage" = light and stage (1).
   Remove either word to switch that part off; remove both for the plain watch.
   1) stage: a soft spotlight from above, darker edges, a beam with slow dust, and the watch reflected on a glossy black surface
   2) glass: a domed crystal with a long curved highlight that follows the pointer and a faint blue anti-reflective rim
   3) metal: faceted indices and hands (one face lit, one in shadow), a polished bezel around a brushed inner ring */

/* 1. stage */
.watch-sec.lux-stage{background:radial-gradient(ellipse 34% 62% at 30% 0%,rgba(150,180,255,.16),transparent 70%),radial-gradient(ellipse 60% 70% at 30% 50%,#0f1a46 0%,#060b22 55%,#020309 100%)}
.watch-sec.lux-stage::before{background:radial-gradient(ellipse 22% 40% at 30% 46%,rgba(120,155,255,.22),transparent 70%),radial-gradient(ellipse 120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%)}
.watch-sec.lux-stage .wbeam{position:absolute;left:-30%;right:-30%;top:-70%;height:150%;transform:translateZ(-40px);pointer-events:none;
  background:linear-gradient(180deg,rgba(170,195,255,.13),rgba(170,195,255,.03) 70%,transparent);
  clip-path:polygon(38% 0,62% 0,90% 100%,10% 100%);filter:blur(6px)}
.watch-sec:not(.lux-stage) .wbeam,.watch-sec:not(.lux) .wdome{display:none}
.watch-sec.lux-stage .wbeam b{position:absolute;left:var(--x);top:var(--y);width:calc(var(--s)*2px);height:calc(var(--s)*2px);border-radius:50%;
  background:rgba(220,230,255,.75);box-shadow:0 0 6px rgba(200,215,255,.6);animation:wdust var(--d) linear var(--t) infinite}
@keyframes wdust{0%{transform:translate(0,0);opacity:0}15%{opacity:.8}50%{transform:translate(14px,40px);opacity:.5}85%{opacity:.8}100%{transform:translate(-6px,80px);opacity:0}}
.watch-sec.lux-stage .wx{-webkit-box-reflect:below 26px linear-gradient(transparent 62%,rgba(255,255,255,.16))}
.watch-sec.lux-stage .wshadow{bottom:-6%;height:7%;left:16%;right:16%;background:rgba(0,0,0,.85);filter:blur(16px)}

/* 2. glass */
.lux .wglass{background:
  radial-gradient(circle at 50% 50%,transparent 66%,rgba(120,160,255,.10) 70.5%,transparent 71%),
  radial-gradient(ellipse 70% 38% at var(--gx,30%) var(--gy,18%),rgba(255,255,255,.34),rgba(255,255,255,.06) 55%,transparent 72%),
  linear-gradient(var(--ga,125deg),rgba(255,255,255,.14) 0,rgba(255,255,255,0) 40%)}
.lux .wdome{left:50%;top:50%;width:85.3%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) translateZ(24px);pointer-events:none;
  background:conic-gradient(from calc(var(--ga,125deg) + 110deg),transparent 0 8%,rgba(255,255,255,.55) 10%,transparent 13% 100%);
  -webkit-mask:radial-gradient(circle closest-side,transparent 88%,#000 90%,#000 93%,transparent 95%);mask:radial-gradient(circle closest-side,transparent 88%,#000 90%,#000 93%,transparent 95%);
  filter:blur(1.2px);mix-blend-mode:screen}
.lux .wdial{box-shadow:inset 0 0 0 2px #7a86a6,inset 0 10px 24px rgba(10,15,38,.35),inset 0 -6px 14px rgba(255,255,255,.35)}

/* 3. metal */
.lux .watch .hnd>g>path:not(.lume):not(.sc){fill:url(#wHandLux);stroke:rgba(3,5,14,.55)}
.lux .watch .li-g path{fill:url(#wNLux);stroke:rgba(10,15,38,.45);filter:drop-shadow(.6px 1px .4px rgba(10,15,38,.45))}
.lux .wcase{background:conic-gradient(from 200deg,#ffffff,#8a96b4 9%,#f4f7ff 20%,#59658a 33%,#e8eefc 47%,#7f8bab 60%,#ffffff 73%,#6c789a 86%,#ffffff);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 -4px 8px rgba(0,0,0,.3),inset 0 4px 6px rgba(255,255,255,.5),0 26px 44px rgba(0,0,0,.6)}
.lux .wcase::after{content:"";position:absolute;inset:3.4%;border-radius:50%;
  background:repeating-conic-gradient(rgba(255,255,255,.22) 0 .35deg,rgba(40,50,80,.12) .35deg .7deg),linear-gradient(160deg,#dfe6f6,#a7b2cc 55%,#e9eefb);
  -webkit-mask:radial-gradient(circle closest-side,transparent 94%,#000 94.6%);mask:radial-gradient(circle closest-side,transparent 94%,#000 94.6%);
  box-shadow:inset 0 0 0 1px rgba(10,15,38,.25)}
@media (prefers-reduced-motion:reduce){.watch-sec.lux-stage .wbeam b{animation:none}}
/* lux glass, stronger: a crescent of light along the upper curve of the dome, plus the rim glint */
.lux .wglass{background:
  radial-gradient(circle at 50% 50%,transparent 66%,rgba(120,160,255,.14) 70.5%,transparent 71%),
  radial-gradient(ellipse 78% 42% at var(--gx,30%) var(--gy,18%),rgba(255,255,255,.5),rgba(255,255,255,.12) 50%,transparent 70%),
  linear-gradient(var(--ga,125deg),rgba(255,255,255,.16) 0,rgba(255,255,255,0) 42%);
  -webkit-mask:radial-gradient(ellipse 120% 100% at 50% 110%,transparent 58%,#000 74%);mask:radial-gradient(ellipse 120% 100% at 50% 110%,transparent 58%,#000 74%)}
.lux .wdome{background:conic-gradient(from calc(var(--ga,125deg) + 110deg),transparent 0 6%,rgba(255,255,255,.9) 10%,transparent 15% 100%)}
/* light dial: the glass shows as a soft blue-grey reflection band crossing the dial, and a bright line where the dome meets the rim */
.lux .wglass{-webkit-mask:none;mask:none;background:
  linear-gradient(calc(var(--ga,125deg) - 20deg),transparent 30%,rgba(60,85,150,.10) 38%,rgba(60,85,150,.16) 44%,rgba(255,255,255,.28) 46%,transparent 50%),
  radial-gradient(ellipse 78% 42% at var(--gx,30%) var(--gy,18%),rgba(255,255,255,.35),transparent 65%),
  radial-gradient(circle,transparent 69%,rgba(120,160,255,.18) 71%,transparent 72%)}
.lux .wdome{-webkit-mask:radial-gradient(circle closest-side,transparent 93%,#000 95%,#000 97%,transparent 99%);mask:radial-gradient(circle closest-side,transparent 93%,#000 95%,#000 97%,transparent 99%);mix-blend-mode:normal}
/* lux, toned down: softer glass reflection, gentler facets, lighter bezel shadows */
.lux .wglass{background:
  linear-gradient(calc(var(--ga,125deg) - 20deg),transparent 34%,rgba(60,85,150,.05) 40%,rgba(255,255,255,.14) 46%,transparent 50%),
  radial-gradient(ellipse 78% 42% at var(--gx,30%) var(--gy,18%),rgba(255,255,255,.18),transparent 65%)}
.lux .wdome{opacity:.45}
.lux .wdial{box-shadow:inset 0 0 0 2px #7a86a6,inset 0 6px 16px rgba(10,15,38,.22)}
.lux .watch .li-g path{filter:none}
.lux .wcase{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -2px 5px rgba(0,0,0,.18),0 18px 30px rgba(0,0,0,.45)}
.lux .wcase::after{opacity:.6}
/* legal team, scroll-linked: --p (photo) and --pt (text) go 0 -> 1 as the row scrolls in */
.js .tmr.rv.scrub .tmr__img,.js .tmr.rv.scrub .tmr__t{animation:none;transition:none;will-change:filter,opacity,transform}
.js .tmr.rv.scrub .tmr__img{opacity:calc(.15 + var(--p,0)*.85);filter:blur(calc((1 - var(--p,0))*20px));transform:translateY(calc((1 - var(--p,0))*30px)) scale(calc(.97 + var(--p,0)*.03))}
.js .tmr.rv.scrub .tmr__t{opacity:var(--pt,0);filter:blur(calc((1 - var(--pt,0))*14px));transform:translateY(calc((1 - var(--pt,0))*24px))}
/* stronger blur at the start */
.js .tmr.rv.scrub .tmr__img{opacity:calc(.1 + var(--p,0)*.9);filter:blur(calc((1 - var(--p,0))*34px));transform:translateY(calc((1 - var(--p,0))*40px)) scale(calc(.95 + var(--p,0)*.05))}
.js .tmr.rv.scrub .tmr__t{filter:blur(calc((1 - var(--pt,0))*24px));transform:translateY(calc((1 - var(--pt,0))*32px))}

/* watch as a wall clock (index.html: class "wall"): no crown, a soft light from above, and a shadow on the wall behind it.
   Remove the word "wall" to undo; the crown is gone from the markup. */
.wall .wx{-webkit-box-reflect:none}
.watch-sec.wall .watch-sec__w{position:relative}
.watch-sec.wall .watch-sec__w::before{content:"";position:absolute;left:50%;top:-60vh;width:210%;height:calc(60vh + 105%);transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 50% 70% at 50% 0%,rgba(190,208,255,.055),rgba(190,208,255,.02) 55%,transparent 80%)}
.watch-sec.wall .watch-sec__w::after{content:"";position:absolute;left:50%;top:-6%;width:48%;height:12%;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 100%,rgba(205,220,255,.07),transparent 70%)}
.wall .wx{z-index:1}
.wall .wshadow{left:8%;right:8%;top:9%;bottom:-5%;height:auto;border-radius:50%;background:rgba(0,0,0,.5);filter:blur(24px);transform:translateZ(-30px) translateY(3%)}
.wall .wcase{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 4px 5px rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,0,0,.22),0 18px 30px rgba(0,0,0,.45)}

/* contact page: the same watch as the home page, in the emergency-service strip */
.em__w{flex:none;width:clamp(150px,15vw,186px)}
.em__w .wx{margin:0}
@media (max-width:600px){.em__w{width:150px}}

/* services page: the lance link says what it is. "Click here" sits before the lance, both turn blue on hover */
.srow__lance{display:inline-flex;align-items:center;gap:14px;width:auto;height:auto;padding:8px 2px;white-space:nowrap}
.srow__ct{font:700 15px/1.4 var(--arb);color:var(--cyan);transition:color .3s}
html:is([lang=en],[lang=tr],[lang=zh]) .srow__ct{font-family:var(--lat);font-size:13px;letter-spacing:.06em}
.svc--navy .srow__ct{color:var(--ice)}
.srow__lance .golance{width:46px;height:9px;fill:var(--cyan)}
.svc--navy .srow__lance .golance{fill:var(--ice)}
.srow__lance:hover .srow__ct,.srow__lance:focus-visible .srow__ct{color:var(--head)}
.srow__lance:hover .golance,.srow__lance:focus-visible .golance{fill:var(--head)}
.srow__lance:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}

/* services page: each main section opens with a wide Baghdad photograph (the same places as the home-page cards), fading
   into the colour of its section, instead of three small pictures at the top */
.svc-intro{padding-bottom:clamp(36px,4vw,56px)}
.svc-band{--band-bg:var(--paper);position:relative;margin:0;height:clamp(190px,30vw,430px);overflow:hidden;background:var(--navy)}
.svc-band--mist{--band-bg:var(--mist)}
.svc-band img{display:block;width:100%;height:100%;object-fit:cover}
.svc-band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,5,14,.3),rgba(3,5,14,0) 26%,rgba(3,5,14,0) 58%,var(--band-bg) 100%)}
.svc-block .svc{padding-top:clamp(36px,4.5vw,64px)}
@media (max-width:760px){.svc-band{height:clamp(150px,46vw,260px)}}

/* dates written out with the month name: Arabic text uses the Arabic face, English keeps the Latin one */
html:is([lang=ar],[lang=ku]) .act__d span,html:is([lang=ar],[lang=ku]) .meta time{font-family:var(--arb);letter-spacing:0;font-size:16px;font-weight:600}
.act__d b{font-variant-numeric:lining-nums}

/* wall clock, second pass: the cues that make it read as hung on a wall, not lit from all around.
   One key light from the top left; the wall is a plaster surface; the clock casts a tight contact shadow and a long soft one
   to the lower right (the side away from the light), and its case shows a little thickness on that side. No halo around it. */
.watch-sec.wall{background:linear-gradient(180deg,#0b1334,#070c26 62%,#050819)}
.watch-sec.wall::before{background:radial-gradient(ellipse 78% 95% at 6% -12%,rgba(150,176,255,.13),rgba(150,176,255,.04) 48%,transparent 72%)}
.watch-sec.wall::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .8  0 0 0 0 .86  0 0 0 0 1  0 0 0 .9 -.15'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.watch-sec.wall .watch-sec__w::before,.watch-sec.wall .watch-sec__w::after{content:none}
.watch-sec.wall .wshadow{inset:3.2%;height:auto;border-radius:50%;background:transparent;filter:none;transform:translateZ(-10px);
  box-shadow:3px 5px 5px rgba(0,0,0,.6),12px 20px 26px rgba(0,0,0,.5),26px 44px 64px rgba(0,0,0,.34)}
.watch-sec.wall .wcase{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 2px 3px 4px rgba(255,255,255,.5),inset -2px -3px 5px rgba(0,0,0,.22),4px 5px 0 -1px #6f7b9d,6px 8px 0 -2px #444e6c}
/* the wall must be lit enough on the clock's side for its shadow to show: light from the top left, falling off to the right */
.watch-sec.wall{background:linear-gradient(118deg,#202f6b 0%,#162254 38%,#0d1637 72%,#070d26 100%)}
.watch-sec.wall::before{background:radial-gradient(ellipse 70% 90% at 4% -8%,rgba(170,192,255,.14),rgba(170,192,255,.04) 50%,transparent 74%)}
.watch-sec.wall .wshadow{box-shadow:3px 5px 5px rgba(0,0,12,.6),13px 21px 26px rgba(0,0,12,.55),28px 46px 66px rgba(0,0,12,.4)}
.watch-sec.wall .wshadow{box-shadow:3px 5px 5px rgba(0,0,12,.65),14px 22px 28px rgba(0,0,12,.6),30px 50px 70px rgba(0,0,12,.42)}

/* ===== clock, simple version: twelve thin ticks, the logo on the face, two lance hands and a seconds line.
   No case, dial or glass. Same markup/ids as before so main.js and the inline script keep driving the hands. ===== */
.clk{aspect-ratio:1;transform:none;will-change:auto;-webkit-box-reflect:none;width:100%}
.clk .clk__svg{display:block;width:100%;height:100%;overflow:visible}
.clk .hnd{transform-box:view-box;transform-origin:200px 200px;opacity:0;transition:opacity .9s .5s;filter:drop-shadow(0 6px 10px rgba(0,0,12,.55))}
.draw.in .clk .hnd{opacity:1}
.clk .hnd>g>path:not(.lume):not(.sc){fill:url(#tlHand);stroke:rgba(10,15,38,.5);stroke-width:.5;stroke-linejoin:round}
.clk .lume{display:block;fill:none;stroke:#446CCF;stroke-width:1;stroke-linecap:round;filter:none}
.clk .sc{fill:none;stroke:#7d9cf0;stroke-width:1.1}
.clk .sd{fill:#7d9cf0}
.clk .clk__tk{opacity:0;transition:opacity 1.2s}
.draw.in .clk .clk__tk{opacity:1}
@media (prefers-reduced-motion:reduce){.clk .hnd,.clk .clk__tk{transition:none}}

/* home: the clock is the centre of the section, the headline is a small side note */
.watch-sec.wall .watch-sec__in{grid-template-columns:minmax(260px,.95fr) minmax(0,3fr);gap:clamp(24px,3vw,48px);min-height:min(78vh,680px)}
.watch-sec.wall .watch-sec__w{width:min(100%,62vh,540px);justify-self:center}
.watch-sec.wall::before{background:radial-gradient(ellipse 46% 62% at 32% 50%,rgba(110,150,255,.16),transparent 70%)}
.watch-sec.wall .wshadow{display:none}
.watch-sec.wall .watch-sec__t h2.t{font-size:clamp(22px,2.1vw,30px);line-height:1.45;margin-bottom:14px}
.watch-sec.wall .watch-sec__t .lead{font-size:clamp(14px,1.1vw,16px);margin-bottom:22px}
@media (max-width:900px){
  .watch-sec.wall .watch-sec__in{grid-template-columns:minmax(0,1fr);min-height:0}
  .watch-sec.wall .watch-sec__w{order:-1;width:min(80vw,400px)}
}

/* contact page strip */
.em__w{width:clamp(170px,16vw,210px)}
@media (max-width:600px){.em__w{width:170px}}

/* clock, fixed pose after the TIMELINE reference: minute lance at 10 o'clock, hour lance at 8, no seconds hand, black-navy stage.
   The hands sweep from 12 into the pose once, when the section scrolls in. */
.clk #hS{display:none}
.clk .hnd{filter:none}
.clk .hnd>g>path{fill:url(#tlThin);stroke:none}
/* hand motion copied from eblalgroup.com (their GIF: 12 frames, 1s each): the hour lance rests at 8 o'clock, the minute lance
   jumps 30deg every second and turns once in 12s, then starts again. */
.clk #hH{transform:rotate(240deg)}
.clk #hM{transform:rotate(300deg)}
@media (prefers-reduced-motion:no-preference){
  .draw.in .clk #hM{animation:clkStep 12s steps(12,end) infinite}
}
@keyframes clkStep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* clock back in white; the section uses the flat background of the eblalgroup.com clock (rgb 5,13,24) */
.clk .hnd>g>path:not(.lume):not(.sc){fill:url(#tlThin);stroke:none}
.watch-sec.wall{background:#050d18}
.watch-sec.wall::before,.watch-sec.wall::after{display:none}

/* legal team, photo first: each row shows only the person's photo, centred, with the name under it. The bio is hidden behind it.
   Pointer devices: hover the photo (it lifts first) and it glides to the side (left in Arabic, right in English) while the text appears on the other side.
   Touch devices: tap the photo and it shrinks into the corner while the bio opens around it. --d is that change, 0 closed to 1 open. */
@property --d{syntax:"<number>";inherits:true;initial-value:0}
@property --ea{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes tmr-edge{to{--ea:360deg}}
.tmr__h{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;background:none;color:inherit;font:inherit}
.tmr__ph{position:relative;-webkit-tap-highlight-color:transparent}
.tmr__ph .tmr__img{-webkit-user-drag:none;user-select:none}
.tmr__ph:has(.tmr__h:focus-visible) .tmr__img{outline:2px solid var(--cyan);outline-offset:6px}
.tmr__cap{display:none}

@media (hover:hover) and (pointer:fine) and (min-width:761px){
  .js .tmr{--w:300px;--sg:1;container-type:inline-size;display:block;position:relative}
  .js .tmr--lead{--w:380px}
  [dir=rtl] .tmr{--sg:-1}
  .js .tmr__ph{width:var(--w);margin-inline:auto;z-index:2;cursor:pointer;transition:transform 1.5s cubic-bezier(.16,1,.3,1),translate .7s cubic-bezier(.16,1,.3,1)}
  .js .tmr__ph .tmr__img{transition:box-shadow 1.4s ease,filter 1.2s ease}
  .js .tmr.is-open .tmr__ph .tmr__img,.js .tmr:focus-within .tmr__ph .tmr__img{box-shadow:0 38px 70px -26px rgba(8,14,40,.5),0 8px 22px -10px rgba(8,14,40,.3)}
  /* a thin line of light is drawn under the name once the photo has moved aside */
  .js .tmr__n{position:relative;padding-bottom:14px}
  .js .tmr__n::after{content:"";position:absolute;inset-inline-start:0;bottom:0;height:2px;width:min(180px,60%);background:linear-gradient(to var(--ln,right),var(--cyan),transparent);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s ease}
  [dir=rtl] .js .tmr__n::after{transform-origin:100% 50%}
  [dir=rtl] .tmr{--ln:left}
  .js .tmr.is-open .tmr__n::after,.js .tmr:focus-within .tmr__n::after{transform:scaleX(1);transition:transform 1.6s cubic-bezier(.16,1,.3,1) 1s}
  .js .tmr:not(.is-open):not(:focus-within) .tmr__ph:hover{translate:0 -8px}
  .js .tmr.is-open .tmr__ph,.js .tmr:focus-within .tmr__ph{transform:translateX(calc((50cqw - var(--w) / 2) * var(--sg))) scale(1.025)}
  /* the name under the photo, with a lance pointing up at it; it tells people the photo is the way in */
  .js .tmr__cap{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:14px;text-align:center;transition:opacity .4s ease}
  .js .tmr.is-open .tmr__cap,.js .tmr:focus-within .tmr__cap{opacity:0}
  .js .tmr__cn{font:700 clamp(17px,1.5vw,20px)/1.5 var(--arb);color:var(--head)}
  html:is([lang=en],[lang=tr],[lang=zh]) .tmr__cn{font-family:var(--lat);letter-spacing:.01em}
  .tmr__cl{display:none}
  .tmr__cl .golance{position:absolute;left:-15px;top:10px;width:38px;height:8px;fill:var(--cyan);transform:rotate(-90deg)}
  .js .tmr__ph:hover .tmr__cl{transform:translateY(-5px)}
  /* hover hint: a lance of light glides around the photo edge (a bright tip with a fading tail), faint while idle, brighter and faster on hover, gone once the row is open */
  .js .tmr__ph::before,.js .tmr__ph::after{content:"";position:absolute;inset:-7px;pointer-events:none;border-radius:3px;transition:opacity .5s ease}
  .js .tmr__ph::before{border:1px solid rgba(130,160,255,.28)}
  .js .tmr__ph::after{padding:2px;background:conic-gradient(from var(--ea),transparent 0 66%,rgba(95,130,230,.15) 74%,var(--cyan) 94%,#fff 99.4%,transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
    filter:drop-shadow(0 0 6px rgba(120,152,245,.7));opacity:.75;animation:tmr-edge 5s linear infinite}
  .js .tmr:not(.is-open):not(:focus-within) .tmr__ph:hover::after{opacity:1;animation-duration:1.8s;filter:drop-shadow(0 0 9px rgba(160,190,255,.95))}
  .js .tmr.is-open .tmr__ph::before,.js .tmr:focus-within .tmr__ph::before,.js .tmr.is-open .tmr__ph::after,.js .tmr:focus-within .tmr__ph::after{opacity:0}
  .js .tmr__t{position:absolute;inset-block:0;inset-inline-start:0;width:calc(100% - var(--w) - clamp(40px,5vw,84px));display:flex;flex-direction:column;justify-content:center;pointer-events:none}
  .js .tmr.is-open .tmr__t,.js .tmr:focus-within .tmr__t{pointer-events:auto}
  /* the text slides out from behind the photo, one line after another */
  .js .tmr__t>*{opacity:0;filter:blur(12px);transform:translateX(calc(var(--sg) * 120px));transition:opacity .5s ease,filter .6s ease,transform .7s cubic-bezier(.4,0,.2,1)}
  .js .tmr.is-open .tmr__t>*,.js .tmr:focus-within .tmr__t>*{opacity:1;filter:none;transform:none;transition:opacity 1.1s ease,filter 1.2s ease,transform 1.6s cubic-bezier(.16,1,.3,1)}
  .js .tmr.is-open .tmr__t>:nth-child(1),.js .tmr:focus-within .tmr__t>:nth-child(1){transition-delay:.45s}
  .js .tmr.is-open .tmr__t>:nth-child(2),.js .tmr:focus-within .tmr__t>:nth-child(2){transition-delay:.6s}
  .js .tmr.is-open .tmr__t>:nth-child(3),.js .tmr:focus-within .tmr__t>:nth-child(3){transition-delay:.75s}
  .js .tmr.is-open .tmr__t>:nth-child(4),.js .tmr:focus-within .tmr__t>:nth-child(4){transition-delay:.9s}
}

@media not all and (hover:hover) and (pointer:fine), (max-width:760px){
  /* closed: the photo fills the card with the name on it. open: the photo steps back (it blurs and darkens, still filling the card)
     and the text rises over it line by line. The card is always as tall as the text, so nothing below jumps when it opens. */
  .js .tmr{--sg:1;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;width:100%;max-width:420px;min-height:min(118vw,470px);margin-inline:auto;padding:30px 22px;background:var(--navy-2);transition:--d .9s cubic-bezier(.22,1,.36,1)}
  [dir=rtl] .tmr{--sg:-1}
  .js .tmr.is-open{--d:1}
  .js .tmr__t{position:relative;z-index:3;pointer-events:none}
  .js .tmr__t a{pointer-events:auto}
  .js .tmr__n{color:#fff}
  .js .tmr__d{color:var(--ice)}
  .js .tmr__bio{color:rgba(255,255,255,.9)}
  .js .tmr .smp{color:var(--ice);border-color:currentColor}
  /* the text rises in line by line once the photo has stepped back; closing hides it at once */
  .js .tmr__t>*{opacity:0;transform:translateY(22px);filter:blur(8px);transition:opacity .25s ease,transform .25s ease,filter .25s ease}
  .js .tmr.is-open .tmr__t>*{opacity:1;transform:none;filter:none;transition:opacity .8s ease,transform 1s cubic-bezier(.22,1,.36,1),filter .8s ease}
  .js .tmr.is-open .tmr__t>:nth-child(1){transition-delay:.3s}
  .js .tmr.is-open .tmr__t>:nth-child(2){transition-delay:.42s}
  .js .tmr.is-open .tmr__t>:nth-child(3){transition-delay:.54s}
  .js .tmr.is-open .tmr__t>:nth-child(4){transition-delay:.66s}
  .js .tmr__n{font-size:21px}
  .js .tmr--lead .tmr__n{font-size:23px}
  .js .tmr__d{margin-bottom:12px;font-size:16px;line-height:1.7}
  .js .tmr__bio{font-size:14.5px;line-height:1.8}
  .js .tmr__bio p+p{margin-top:8px}
  .js .tmr__ph{position:absolute;inset:0;z-index:2;cursor:pointer;touch-action:manipulation;overflow:hidden}
  .js .tmr__ph .tmr__img{width:100%;height:100%;max-width:none;aspect-ratio:auto}
  .js .tmr__ph::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(8,14,40,.66),rgba(8,14,40,.9));-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);opacity:0;transition:opacity .8s ease}
  .js .tmr.is-open .tmr__ph::before{opacity:1}
  .js .tmr__ph .tmr__img{transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
  .js .tmr.is-open .tmr__ph .tmr__img{transform:scale(1.08)}
  .js .tmr__ph::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none;opacity:calc(1 - var(--d));background:linear-gradient(to top,rgba(3,5,14,.72),transparent)}
  /* closed: name over the photo with a "tap to read" button under it. open: the button shrinks to a small lance that closes it again */
  .js .tmr__cap{display:block;position:absolute;inset-inline:18px;bottom:70px;z-index:1;pointer-events:none;opacity:calc(1 - var(--d) * 2.5)}
  .js .tmr__cl{display:none}
  /* phone: the same lance of light glides around the closed card (no hover on touch, so it runs by itself) and fades as the card opens */
  .js .tmr::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;padding:2px;
    background:conic-gradient(from var(--ea),transparent 0 66%,rgba(95,130,230,.15) 74%,var(--cyan) 94%,#fff 99.4%,transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
    filter:drop-shadow(0 0 5px rgba(120,152,245,.7));opacity:calc(.9 - var(--d) * 2.5);animation:tmr-edge 5s linear infinite}
  .js .tmr__cn{display:block;font:700 22px/1.45 var(--arb);color:#fff;text-shadow:0 1px 8px rgba(3,5,14,.5)}
  html:is([lang=en],[lang=tr],[lang=zh]) .tmr__cn{font-family:var(--lat)}
  /* no visible button any more: the whole photo is the control (the button stays in the page, visually hidden, for keyboard and screen readers) */
}
@media (prefers-reduced-motion:reduce){
  .js .tmr,.js .tmr__ph,.js .tmr__t>*,.tmr__cl{transition:none!important}
  .js .tmr__ph::after,.js .tmr::after{animation:none!important;--ea:200deg}
}

/* home clock section: clock centred, the one-line thin headline sits in the bottom corner (marked by the client) */
.watch-sec.wall .watch-sec__in{position:relative;grid-template-columns:minmax(0,1fr);justify-items:center;min-height:min(88vh,780px)}
.watch-sec.wall .watch-sec__w{grid-area:1/1;justify-self:center}
.watch-sec.wall .watch-sec__t{position:absolute;bottom:0;inset-inline-start:var(--pad);display:flex;flex-direction:column;align-items:flex-start;text-align:start}
.watch-sec.wall .watch-sec__t h2.t{font-family:var(--arb);font-weight:400;font-size:clamp(22px,1.8vw,30px);line-height:1.3;white-space:nowrap;margin-bottom:12px}
html:is([lang=en],[lang=tr],[lang=zh]) .watch-sec.wall .watch-sec__t h2.t{font-family:var(--latb)}
.watch-sec.wall .watch-sec__t h2.t::after{display:none}
.watch-sec.wall .watch-sec__t .lead{margin-bottom:16px}
@media (max-width:900px){
  .watch-sec.wall .watch-sec__in{min-height:0}
  .watch-sec.wall .watch-sec__t{position:static;align-items:center;text-align:center;margin-top:8px}
  .watch-sec.wall .watch-sec__t h2.t{white-space:normal}
}

/* clock section, tuned: clock a bit larger, the small "24/7" note starts at the page edge (the client's mark) */
.watch-sec.wall .watch-sec__in{position:static;min-height:min(92vh,820px)}
.watch-sec.wall .watch-sec__w{width:min(100%,74vh,640px)}
.watch-sec.wall .watch-sec__t{inset-inline-start:clamp(20px,3vw,56px);bottom:clamp(24px,5vh,56px)}
.watch-sec.wall .watch-sec__t h2.t{font-size:clamp(17px,1.4vw,23px);margin-bottom:12px}
.watch-sec.wall .watch-sec__t .lead{font-size:13px;margin-bottom:10px}
.watch-sec.wall .watch-sec__t .btn{font-size:13px;min-height:36px;padding:0 18px}
@media (max-width:900px){
  .watch-sec.wall .watch-sec__in{position:relative;min-height:0}
  .watch-sec.wall .watch-sec__w{width:min(86vw,440px)}
  .watch-sec.wall .watch-sec__t{inset-inline-start:auto;bottom:auto}
}

/* the small 24/7 note, designed as part of the clock: a short tick (the length of the 3 and 9 o'clock ticks) draws in above it,
   the headline is light, the grey line is tinted from the navy, and the button is a thin outlined rectangle like the ticks */
.watch-sec.wall .watch-sec__t{gap:0}
.watch-sec.wall .watch-sec__t::before{content:"";display:block;width:56px;height:1.6px;background:#eef2ff;margin-bottom:18px;transform:scaleX(0);transform-origin:100% 50%;transition:transform 1.4s cubic-bezier(.16,1,.3,1) .9s}
html:is([lang=en],[lang=tr],[lang=zh]) .watch-sec.wall .watch-sec__t::before{transform-origin:0 50%}
.draw.in .watch-sec__t::before{transform:scaleX(1)}
.watch-sec.wall .watch-sec__t h2.t{font-weight:400;letter-spacing:0;margin-bottom:8px}
.watch-sec.wall .watch-sec__t .lead{color:#9aa8cc;font-size:13px;line-height:1.7;margin-bottom:18px}
.watch-sec.wall .watch-sec__t .btn{background:transparent;color:#eef2ff;border:1px solid rgba(238,242,255,.55);box-shadow:none;transition:background-color .25s,border-color .25s,color .25s}
.watch-sec.wall .watch-sec__t .btn:hover{background:#eef2ff;border-color:#eef2ff;color:#050d18}
.watch-sec.wall .watch-sec__t .btn:focus-visible{outline:2px solid #7d9cf0;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.watch-sec.wall .watch-sec__t::before{transition:none}}
@media (max-width:900px){.watch-sec.wall .watch-sec__t::before{margin-inline:auto}}

/* ===== home page, services: a compact list on one side, one photo on the other. Hovering a service brings its photo forward and
   dims the others; a click goes to that service. Phones: every service shows its own photo above its text. ===== */
.svcx{margin-top:clamp(28px,4vw,48px)}
.svcx__i{color:var(--head);text-decoration:none}
.svcx__h{font:800 clamp(19px,1.7vw,23px)/1.45 var(--ar);color:var(--head);transition:color .4s}
html:is([lang=en],[lang=tr],[lang=zh]) .svcx__h{font-family:var(--lat);letter-spacing:.01em}
.svcx__d{font-size:15.5px;line-height:1.8;color:#454d6b;max-width:44ch}
.svcx__go{display:inline-flex;align-items:center;gap:10px;font:700 14px/1.4 var(--arb);color:#3B5FBF}
.svcx__go .golance{width:34px;height:7px;fill:currentColor;flex:none;transition:transform .5s var(--ease)}
[dir=rtl] .svcx__go .golance{transform:scaleX(-1)}
.svcx__i:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.svcx__i.is-hit{animation:svcx-hit .6s var(--ease)}
@keyframes svcx-hit{0%{background:rgba(68,108,207,.2)}100%{background:var(--mist)}}
@media (min-width:901px){
  .svcx{--sw:min(46%,520px);position:relative;display:grid;grid-template-columns:var(--sw) minmax(0,1fr);column-gap:clamp(24px,3.4vw,52px);align-items:stretch;max-width:1120px;margin-inline:auto}
  .svcx__img{position:absolute;inset-block:0;inset-inline-start:0;width:var(--sw);height:100%;object-fit:cover;object-position:50% 38%;opacity:0;transform:scale(1.04);pointer-events:none;
    transition:opacity .8s ease,transform 1.4s var(--ease)}
  .svcx__i.is-on .svcx__img{opacity:1;transform:none;box-shadow:0 28px 44px -26px rgba(8,14,40,.5)}
  /* the selected service: a light card with a short line drawn inside it, next to the text (not a border on the edge) */
  .svcx__i{grid-column:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:20px 24px 20px 24px;padding-inline-start:38px;
    background:linear-gradient(var(--cyan),var(--cyan)) no-repeat left 16px center/3px 0,transparent;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
    transition:background-color .4s,background-size .7s var(--ease),box-shadow .5s}
  [dir=rtl] .svcx__i{background-position:right 16px center}
  .svcx__i .svcx__h{color:#66708f}
  .svcx__i .svcx__d{color:#5d6685}
  .svcx__i:hover{background-color:rgba(248,247,243,.7)}
  .svcx__i:hover .svcx__h{color:var(--head)}
  .svcx__i.is-on{background-color:var(--mist);background-size:3px calc(100% - 44px);box-shadow:0 18px 30px -22px rgba(8,14,40,.4)}
  .svcx__i.is-on .svcx__h{color:var(--cyan)}
  .svcx__i.is-on .svcx__d{color:#2c324a}
  .svcx__go{margin-top:4px;opacity:0;transform:translateY(5px);transition:opacity .45s,transform .55s var(--ease)}
  .svcx__i.is-on .svcx__go,.svcx__i:focus-visible .svcx__go{opacity:1;transform:none}
  .svcx__i:hover .svcx__go .golance{transform:translateX(5px)}
  [dir=rtl] .svcx__i:hover .svcx__go .golance{transform:scaleX(-1) translateX(5px)}
}
@media (max-width:900px){
  .svcx{display:grid;gap:clamp(24px,5vw,36px);max-width:560px}
  .svcx__i{display:block}
  .svcx__img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;margin-bottom:14px}
  .svcx__h{display:block;margin-bottom:6px}
  .svcx__d{display:block;margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){.svcx__img,.svcx__i,.svcx__go{transition:none!important}}

/* ===== home page, latest news: a title row with the "all news" link, then one featured story and two compact ones at the same total height.
   Featured story: the photo fills the card with the text over a navy fade. Phones: a swipeable row, the next story peeking in. ===== */
.nh__head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:clamp(24px,3vw,40px)}
.news--home .nh__head h2.t{margin:0}
.nh__all{display:inline-flex;align-items:center;gap:10px;font:700 15px/1.4 var(--arb);color:#3B5FBF;text-decoration:none;white-space:nowrap}
.nh__all .golance{width:34px;height:7px;fill:currentColor;flex:none;transition:transform .5s var(--ease)}
[dir=rtl] .nh__all .golance{transform:scaleX(-1)}
.nh__all:hover .golance{transform:translateX(5px)}
[dir=rtl] .nh__all:hover .golance{transform:scaleX(-1) translateX(5px)}
.nh__all:focus-visible,.nh a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.nh h3{margin:0 0 8px}
.nh h3 a{color:inherit;text-decoration:none;transition:color .3s}
html:is([lang=en],[lang=tr],[lang=zh]) .nh h3{font-family:var(--lat)}
.nh__ph{display:block;overflow:hidden;background:var(--navy-2)}
.nh__ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.nh__lead:hover .nh__ph img,.nh__it:hover .nh__ph img{transform:scale(1.04)}
.nh a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.nh .ncard__go{margin-top:10px}
@media (min-width:901px){
  .nh{--h:clamp(440px,32vw,520px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:var(--h);gap:clamp(24px,3vw,44px);max-width:1120px;margin-inline:auto}
  .nh__lead{position:relative;overflow:hidden;color:#fff;isolation:isolate}
  .nh__lead .nh__ph{position:absolute;inset:0;z-index:-2}
  .nh__lead::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,5,14,0) 28%,rgba(3,5,14,.55) 58%,rgba(3,5,14,.92) 100%)}
  .nh__lead .nh__tx{position:absolute;inset:auto 0 0 0;padding:clamp(22px,2.4vw,34px)}
  .nh__lead h3{font:800 clamp(21px,1.9vw,27px)/1.5 var(--ar);max-width:22em;color:#fff}
  .nh__lead h3 a:hover,.nh__lead h3 a:focus-visible{color:var(--ice)}
  .nh__lead .nh__tx>p:not(.meta){margin:0;font-size:15.5px;line-height:1.8;color:#DCE5F8;max-width:52ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .nh__lead .meta,.nh__lead .meta time{color:#E3E9F7}
  .nh__lead .smp{color:#E3E9F7;border-color:rgba(227,233,247,.6)}
  .nh__lead .srow__go{color:#fff;border-color:rgba(255,255,255,.65)}
  .nh__side{display:grid;grid-template-rows:1fr 1fr}
  .nh__it{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:22px;align-items:center;padding-block:18px}
  .nh__it .nh__ph img{height:auto;aspect-ratio:4/3}
  .nh__it:first-child{padding-top:0}
  .nh__it:last-child{padding-bottom:0}
  .nh__it+.nh__it{border-top:1px solid rgba(31,44,86,.14)}
  .nh__it .nh__tx{align-self:center}
  .nh__it h3{font:700 clamp(16.5px,1.3vw,19px)/1.55 var(--ar);color:var(--head)}
  .nh__it h3 a:hover,.nh__it h3 a:focus-visible{color:var(--cyan)}
}
@media (max-width:900px){
  .nh{display:grid;gap:22px;max-width:640px;margin-inline:auto}
  .nh__lead{position:relative;overflow:hidden;color:#fff;isolation:isolate;aspect-ratio:16/11}
  .nh__lead .nh__ph{position:absolute;inset:0;z-index:-2}
  .nh__lead::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,5,14,0) 22%,rgba(3,5,14,.6) 58%,rgba(3,5,14,.92) 100%)}
  .nh__lead .nh__tx{position:absolute;inset:auto 0 0 0;padding:20px}
  .nh__lead h3{font:800 21px/1.5 var(--ar);color:#fff}
  .nh__lead .nh__tx>p:not(.meta){display:none}
  .nh__lead .meta,.nh__lead .meta time{color:#E3E9F7}
  .nh__lead .smp{color:#E3E9F7;border-color:rgba(227,233,247,.6)}
  .nh__lead .srow__go{color:#fff;border-color:rgba(255,255,255,.65)}
  .nh__side{display:grid;gap:0}
  .nh__it{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:16px;padding-block:18px}
  .nh__it:first-child{padding-top:0}
  .nh__it+.nh__it{border-top:1px solid rgba(31,44,86,.14)}
  .nh__it .nh__ph img{aspect-ratio:4/3}
  .nh__it h3{font:700 17.5px/1.55 var(--ar);color:var(--head)}
}
@media (max-width:640px){
  .nh{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad,16px);margin-inline:calc(var(--pad,16px) * -1);padding-inline:var(--pad,16px);padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:none}
  .nh::-webkit-scrollbar{display:none}
  .nh__side{display:contents}
  .nh__lead,.nh__it{flex:0 0 82%;scroll-snap-align:start;position:relative;overflow:hidden;display:block;padding:0!important;border:0!important;color:#fff;isolation:isolate;aspect-ratio:4/5}
  .nh__it::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,5,14,0) 28%,rgba(3,5,14,.62) 60%,rgba(3,5,14,.92) 100%)}
  .nh__it .nh__ph{position:absolute;inset:0;z-index:-2}
  .nh__it .nh__ph img{aspect-ratio:auto}
  .nh__it .nh__tx{position:absolute;inset:auto 0 0 0;padding:18px}
  .nh__it h3{color:#fff;font-size:19px}
  .nh__it .meta,.nh__it .meta time{color:#E3E9F7}
  .nh__it .smp{color:#E3E9F7;border-color:rgba(227,233,247,.6)}
  .nh__it .srow__go{color:#fff;border-color:rgba(255,255,255,.65)}
  .nh__lead{aspect-ratio:4/5}
  .nh__lead h3{font-size:21px}
}
@media (prefers-reduced-motion:reduce){.nh__ph img,.nh__all .golance{transition:none!important}}

/* ===== language menu (Arabic, English, Turkish, Chinese, Kurdish) and the Chinese font stack ===== */
.lang__menu{position:absolute;top:calc(100% + 8px);z-index:200;min-width:168px;margin:0;padding:6px;list-style:none;background:#fff;color:var(--head);border:1px solid rgba(31,44,86,.16);box-shadow:0 20px 34px -18px rgba(8,14,40,.38)}
[dir=rtl] .lang__menu{left:0}
[dir=ltr] .lang__menu{right:0}
.lang__menu[hidden]{display:none}
.lang__menu li{padding:10px 14px;font:600 15px/1.4 var(--arb);text-align:start;cursor:pointer;outline:none;transition:background .2s,color .2s}
.lang__menu li[lang=en],.lang__menu li[lang=tr]{font-family:var(--latb)}
.lang__menu li[lang=zh]{font-family:'Microsoft YaHei','PingFang SC','Noto Sans CJK SC','Noto Sans SC',sans-serif}
.lang__menu li:hover{background:var(--mist)}
.lang__menu li:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;background:var(--mist)}
.lang__menu li[aria-selected=true]{color:var(--cyan);font-weight:800}
html[lang=zh]{--lat:'Raleway','Microsoft YaHei','PingFang SC','Noto Sans CJK SC','Noto Sans SC',sans-serif;--latb:'Open Sans','Microsoft YaHei','PingFang SC','Noto Sans CJK SC','Noto Sans SC',sans-serif}
html[lang=zh] body{line-height:1.8}
@media (prefers-reduced-motion:reduce){.lang__menu li{transition:none}}

/* ===== contact page: the map ===== */
.cmap{padding-block:clamp(8px,2vw,24px) clamp(40px,5vw,72px)}
.cmap__f{position:relative;aspect-ratio:21/8;min-height:260px;background:var(--mist);overflow:hidden}
.cmap__f iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.02)}
.cmap__c{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin:16px 0 0;font:600 16px/1.6 var(--arb);color:var(--head)}
html:is([lang=en],[lang=tr],[lang=zh]) .cmap__c{font-family:var(--latb)}
@media (max-width:640px){.cmap__f{aspect-ratio:4/3}}

/* contact page: the channels heading is a quiet section title, not a banner */
.contact .contact__grid h2.t{font-size:clamp(24px,2.5vw,32px);line-height:1.4;margin-bottom:14px}
html:is([lang=en],[lang=tr],[lang=zh]) .contact .contact__grid h2.t{font-size:clamp(22px,2.2vw,29px)}

/* news and activities: the read link is the lance (light nudge on hover, a thrust on click, then the story opens) */
.ncard .srow__lance,.nfeat .srow__lance,.act .srow__lance,.nh .srow__lance{display:inline-flex;margin-top:0;padding:8px 2px}
.nh__lead .srow__ct{color:#fff}
.nh__lead .srow__lance .golance{fill:#fff}
.nh__lead .srow__lance:hover .srow__ct,.nh__lead .srow__lance:focus-visible .srow__ct{color:var(--ice)}
@media (max-width:640px){
  .nh__it .srow__ct{color:#fff}
  .nh__it .srow__lance .golance{fill:#fff}
  .nh__it .srow__lance:hover .srow__ct,.nh__it .srow__lance:focus-visible .srow__ct{color:var(--ice)}
}